Canvas is stretched when using CSS but normal with “width” / “height” properties

by

I have 2 canvases, one uses HTML attributes width and height to size it, the other uses CSS:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1 displays like it should, but not compteur2. The content is drawn using JavaScript on a 300×300 canvas.

Why is there a display difference?

alt text

9 Answers
9

Leave a Comment