Setting the canvas width and height with css shifts the pen

Question

When i'm setting the canvas width and height with css, the pen is beeing shifted. After zooming in/out in the browser (chromium), the pen isn't shifted anymore. I'm using the literally canvas widget and want to fit the canvas to its parent div. After initializing the canvas, i'm setting the width/height of the canvas with the jquery css function. But my pen isn't at the same coordinates. After scrolling in or out in my current browser, the pen is at the coordinates where my mouse pointer is. Can anyone help me?

$('.lc-drawing').find('canvas').css({'width':containerWidth, 'height':containerWidth});

Answer 1

With canvas you usually find you need to actually set the width and height attributes normally, rather than css/style width and heights.

My example with your code shared would be to try:

$('.lc-drawing').find('canvas').attr('width', containerWidth).attr('height', containerWidth);

Can you also confirm you are intending to set "containerWidth" for the height and width of the canvas?

Regarding resizing the canvas, consider adding some responsive CSS like this, to maintain the position values, but resize for mobile.

canvas {
  width: 100%;
  height: auto;
}

You will still need the width and height attributes on the canvas itself though.