Почему я не могу нарисовать линию?

Question

Я пытаюсь нарисовать линию от левой верхней части моего прямоугольника к центру?Прямоугольник появляется, но не линия ...

  <script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.strokeRect(10,10,300,175);
    ctx.moveTo(10,10);
    ctx.lineTo(140, 87);
 </script>

(это внутри тега body)

Answer 1

См. MDN :

Метод CanvasRenderingContext2D.lineTo () API Canvas 2D соединяет последнюю точку в подпуть с координатами x, y с помощьюпрямая линия (, но на самом деле не рисует ее ).

Используйте метод stroke(), чтобы фактически нарисовать линию

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

ctx.strokeRect(10, 10, 300, 175);
ctx.moveTo(10, 10);
ctx.lineTo(140, 87);
ctx.stroke();

<canvas id=canvas></canvas>

Answer 2

Вам нужно вызвать ctx.stroke(); после вашего lineTo:

Метод CanvasRenderingContext2D.stroke () API Canvas 2D обводит текущий или заданный путь с помощьютекущий стиль обводки с использованием правила ненулевой намотки.

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


ctx.moveTo(10,10);
ctx.lineTo(140, 87);
ctx.stroke()

<canvas id="canvas">