HTML Изменение размера холста и пространства координат

Question

Примечание: я использую Google Chrome

В настоящее время у меня есть эта тестовая страница

http://www.evecakes.com/doodles/canvas_size_issue.htm

Это должно нарисовать прямоугольник прямо под курсором мыши, но есть некоторые действительно странные проблемы с масштабированием, которые заставляют его рисовать с переменным смещением. Я думаю, это потому, что пространство координат холста не увеличивается вместе с размером HTML. Есть ли способ увеличить размер этого координатного пространства?

Вот функция JavaScript

$('#mapc').mousemove(function (event) {

            var canvas = $('#mapc');
            var ctx = canvas[0].getContext('2d');

            ctx.fillStyle = "rgb(200,0,0)";
            ctx.fillRect(event.clientX, event.clientY, 55, 50);

            document.title = event.clientX + " --- " + event.clientY;

        });

Answer 1

Установите width и height HTML-атрибуты холста.В данный момент он принимает ширину по умолчанию, а CSS просто растягивает ее, и кажется, что он масштабируется.

Примечание: вы можете использовать this в событии mousemoveявляется ссылкой на элемент #mapc, поэтому вам не придется запрашивать DOM при каждом движении мыши.

var offset = $('#mapc').offset();

$('#mapc').mousemove(function (event) {

    var ctx = this.getContext('2d');

    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect(event.pageX - offset.left, event.pageY - offset.top, 1, 1);
});