Setting The Canvas Width And Height With Css Shifts The Pen

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 liter

Solution 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.