Why HTML5 Canvas with a larger size stretch a draw

Question

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.

Answer 1

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