Принцип работы canvas?

Question

[agromov91]

Почему в данном примере:

1) Я при помощи lineTo не могу провести линию ниже изначально указанной moveTo?
2) Опять же ctx.fillText не отображается ниже moveTo?

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

ctx.beginPath();
ctx.moveTo(1, 150);
ctx.lineTo(100, 150);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = 'black';
ctx.fill();

ctx.fillText( "Привет", 1, 280);

Answer 1

[profesor08]

Ты чертишь линию вправо, потом вверх, замыкаешь контур и красишь его. Вот что у тебя происходит.

ctx.beginPath();
ctx.moveTo(1, 150);
ctx.lineTo(100, 130);
ctx.lineTo(100, 230);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = 'red';
ctx.fill();

И задай размер канвасу, чтоб все твои манипуляции не уходили за его предел.