How does canvas work?

Question

JavaScript

Why in this example:
1) I can't draw a line using lineTo below the initially specified moveTo?
2) Again ctx.fillText doesn't appear below 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

You draw a line to the right, then up, close the outline and paint it. Here's what's happening to you.

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

And set the size of the canvas so that all your manipulations do not go beyond its limit.