How do you draw a rectangle on HTML5 canvas?

Use HTML5 canvas' fillRect method:

context.fillStyle = "red";
context.fillRect(0, 0, 100, 50);

Use HTML5 canvas' rect method:

context.fillStyle = "blue";
context.beginPath();
context.rect(0, 0, 100, 50);
content.closePath();
context.fill()

Use HTML5 canvas' lineTo method:

context.fillStyle = "green";
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(100, 50);
context.lineTo(0, 50);
content.closePath();
context.fill();

Related Articles