Why does a large HTML5 canvas stretch a line?

Question

I am using HTML5 <canvas> to draw strings.

When I resize from the default 300x150 to fit the dimensions of another <div> , my lines look stretched and thicker than before. Why is this happening?

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

EDIT: This only seems to be in Firefox.

Answer 1

You cannot resize canvas using CSS. If you do this, it will look like an image and it will stretch. You have to do this in javascript with canvas properties canvas.width, canvas.height