Question

var qcanvas = $('#canvas');
var canvas = ctl_canvas[0];
var context = canvas.getContext('2d');
qcanvas.css('border', '1px solid black');
qcanvas.css('width', 400);
qcanvas.css('height', 75);

When I use the above qcanvas.css('width', 400); and respective height css, the actual height of the canvas is not what I set it to using the jquery functions. Does anyone know how I can not use canvas.width = 400; and use the propery jquery functions?

Answer 1

The .width and .height properties of a canvas are independent of the CSS properties of the same name.

The CSS properties set the visible size, but the element properties set the coordinate space.

You should set the width and height properties directly:

qcanvas.width = 400;
qcanvas.height = 75;

Ideally set the CSS properties to the same, which is the default in any event unless specifically changed.

This ensures that your coordinate systems are consistent. If they’re not the same then the browser will apply scaling to map from one coordinate system to the other, and you would also have to apply your own scaling to map event coordinates to pixel coordinates.