0

I have:

const ctx = document.getElementById("canvas").getContext("2d");
ctx.strokeStyle = "green";
ctx.beginPath()
ctx.moveTo(10,10);
ctx.lineTo(100,100);
ctx.stroke();
<canvas id="canvas" style="height:300px; width:300px; border:solid 1px red" />

The x coordinates appear to be correct, but the y coordinates are rendered at twice the specified values. Why is this so?

enter image description here

Old Geezer
  • 12,512
  • 25
  • 98
  • 173
  • Don't use CSS to set width/height, use `canvas.width = canvas.height = 300;` in JS or `width="300" height="300"` in HTML. – ggorlen Jan 18 '22 at 22:05

0 Answers0