Html Canvas Resizing And Coordinate Space

Question

Note: I'm using Google Chrome

Currently I have this test page

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

It should draw a rectangle right below the mouse cursor, but there are some really weird scaling issues which is causing it to draw at a varying offset. I think it's because the canvas coordinate space is not increasing along with its html size. Is there a way to increase that coordinate space size?

Here's the javascript function

$('#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

Set the width and height HTML attributes of the canvas. Right now, it's assuming its default width and the CSS is just stretching it, and it appears as if it is scaling.

A side-note, you can use this in the mousemove event - it is a reference to #mapc element, so you won't have to query the DOM on every mouse move.

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);
});