0

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});
Muhammet Tasan
  • 1

1 Answers1

0

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.

mattpark22
  • 741
  • 2
  • 14
  • 26
  • Thank you very much! After spending a lot of time (before posting this question), I've solved now my problem. The goal was, that I wanted to override a canvas to which the 'style' attribute already was set. I tried to override the style attribute values and I have set the width and height with the attr() function too. My mistake was as follows: I had to remove first any inline style attributes containing the width and height of the canvas. So after removing them, I could set the height and width attributes and the canvas resized correctly. – Muhammet Tasan Jul 07 '16 at 15:39
  • But the problem still is there for the mobile mode. I tested it on my mobile and even on chrome developer tools (mobile mode). The pen is still shifted. Can you help with this issue? – Muhammet Tasan Jul 08 '16 at 07:14
  • I've added some CSS to assist with the canvas in mobile mode - to my above post, hopefully this is useful to your solution. – mattpark22 Jul 08 '16 at 14:40