Почему координаты нарисованных квадратиков не совпадают с координатами мышки?
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">