Để vẽ hình vuông - chữ nhật trong HTML5 Canvas chúng ta có thể sử dụng phương thức rect().
 
Cú pháp:
1

context.rect(topLeftCornerX,topLeftCornerY,width,height);

Cũng khá dể hiểu. Phương thức này cho chúng ta truyền 4 tham số:  vị trí trái - x, vị trí trái top - y, chiều rộng, cao của hình.

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    var topLeftCornerX = 188;
    var topLeftCornerY = 50;
    var width = 200;
    var height = 100;
 
    context.beginPath();
    context.rect(topLeftCornerX, topLeftCornerY, width, height);
 
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = "black";
    context.stroke();
};

Kết quả: