Есть простая страница с Canvas. И простой скрипт o.js
, задача которого нарисовать квадрат заданного размера под курсором:
const canvas = $("#area");
const area = canvas[0].getContext("2d");
const rect = canvas[0].getBoundingClientRect();
let size = 20;
let lx = 0;
let ly = 0;
canvas.click(function(e){
area.clearRect(lx, ly, size, size);
lx = e.clientX - rect.left;
ly = e.clientY - rect.top;
console.log(lx);
console.log(ly);
area.fillRect(lx, ly, size, size);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<canvas id="area" style="width: 800px; height: 800px; border: black solid 1px"></canvas>
</body>
<script src="src/o.js"></script>
</html>
Проблема в том, что квадрат рисуется правее, ниже курсора, причём чем дальше клик от начала координат, тем выше разница в расстоянии между курсором и квадратом. В чём может быть проблема?