With canvas, ctx.lineTo draws a longer "Y" line than instructed (160 instead of 120)

Asked Sep 10 '22 at 05:56

Active Sep 10 '22 at 05:56

Viewed 17 times

See below, the "frame" is a 480(w) by 240(h). And yet, When Y is set yo 120, it draws a 160px, as can be seen in the snippet.

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

ctx.lineWidth = 4;
ctx.strokeStyle = "#000";

ctx.beginPath();
ctx.moveTo(120, 0);
ctx.lineTo(120, 120);
ctx.stroke();

* {
  margin: 0;
  padding: 0;
}

canvas {
  border: 1px solid #d0d0d0;
  justify-content: center;
  vertical-align: middle;
  width: 480px;
  height: 240px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -120px;
  margin-left: -240px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <canvas id="canvas"></canvas>
</body>

</html>

asked Sep 10 '22 at 05:56

Tzury Bar Yochay

8,798
5
49
73

Setting `width` and `height` CSS properties on ` – ggorlen Sep 10 '22 at 06:17
@ggorlen indeed! now I am getting it. May you post it as an asnwer so I can mark is as answered? – Tzury Bar Yochay Sep 10 '22 at 09:18
Thanks, but no need--the question has been asked and answered before many times so we can just close this as a dupe. – ggorlen Sep 10 '22 at 15:43

With canvas, ctx.lineTo draws a longer "Y" line than instructed (160 instead of 120)

0 Answers0