2

I am using a HTML5 <canvas> to draw lines on.

When I change the dimensions from the default of 300x150 to match the dimensions of another <div> my lines appear stretched and are thicker than before. Why is this happening?

I want to draw the lines on the canvas to match the position of elements on the <div> that is in front of it (with a higher z-index) in the same position on the page. How can I stop this stretching from happening?

EDIT: This appears only to be in Firefox.

StuperUser
  • 10,555
  • 13
  • 78
  • 137

1 Answers1

4

You can't change canvas size with CSS. If you do it will behave like an image and it will stretch You have to do it in javascript with canvas properties canvas.width, canvas.height

Tom Tu
  • 9,573
  • 35
  • 37
  • Well, you *can*, it just not be what you want. :) You might note that after changing the height/width of the canvas the contents need to be redrawn. – Phrogz Jan 27 '11 at 18:00