0

Почему координаты нарисованных квадратиков не совпадают с координатами мышки?

var canvas = document.getElementById('cl');
var ctx = canvas.getContext('2d');

var myColor;
document.getElementById('color').oninput = function() {
  myColor = this.value;
}

canvas.onmousedown = function(event) {
  canvas.onmousemove = function(event) {
    var x = event.offsetX;
    var y = event.offsetY;
    ctx.fillStyle = myColor;
    ctx.fillRect(x - 0.5, y - 0.5, 10, 10);
    ctx.fill();
  }

  canvas.onmouseup = function() {
    canvas.onmousemove = null;
  }
}
canvas {
  width: 400px;
  height: 400px;
  border: 3px solid black;
  margin: 40px;
}
<canvas id="cl">Подключите</canvas>
<input type="color" id="color">

4
  • Вам надо указать width='400' и height='400' для элемента canvas. Commented 20 апр. 2020 в 14:13
  • Optimus не добавил этого
    – BotKotik
    Commented 20 апр. 2020 в 14:14
  • Иначе разрешение холста не совпадает с размером который вы задали в стилях Commented 20 апр. 2020 в 14:14
  • Отсюда и такой эффект, укажите и все заработает. Commented 20 апр. 2020 в 14:15

2 ответа 2

3

Изменения: <canvas id="cl" width='400' height='400'>Подключите</canvas>

Размер канваса (место, которое он занимает на странице) определяется стилями. В данном случае это canvas{width: 400px;height: 400px;border: 3px solid black; margin: 40px;}.

Но разряшение холста определяется отдельно, в его атребутах width и height, и может не совпадать с его размером. Тогда содержимое просто растягивается под размер, указанный в стилях. А дефолтное разрешение канвы: 300 * 150;

var canvas = document.getElementById('cl');
var ctx = canvas.getContext('2d');

var myColor;
document.getElementById('color').oninput = function(){
  myColor=this.value;
}
          
canvas.onmousedown = function(event){
  canvas.onmousemove = function(event){
    var x = event.offsetX;
    var y = event.offsetY;
    ctx.fillStyle = myColor;
    ctx.fillRect(x-0.5,y-0.5,10,10);
    ctx.fill();
  }
  
  canvas.onmouseup = function(){ 
    canvas.onmousemove = null;
  }
}
canvas{width: 400px;height: 400px;border: 3px solid black; margin: 40px;}
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Сайт 2</title>
  </head>
  <body>
    <noscript>Подключите JS</noscript>
    <canvas width="400" height="400" id="cl">Подключите</canvas>
    <input type="color" id="color">
  </body>
<html>  

1
  • добавь пояснения почему это помогает
    – Grundy
    Commented 20 апр. 2020 в 14:54
0

Проблема в аппаратном масштабировании. Стили растягивают элемент, а в свойстве тега ты задаешь ему определенный размер.

Можно использовать атрибуты для тега (width, height), или же используй cl.width

Наглядно ты можешь это увидеть, посмотрев контекст элемента canvas:

введите сюда описание изображения

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.