В Canvas предопределены методя для создания прямоугольников.
fillRect(x,y,width,height) — рисует заполненый цветом прямоугольник
strokeRect(x,y,width,height) — рисует не заполненный цветом прямоугольник
clearRect(x,y,width,height) — очищает заданную область прямоугольника
Все три метода принимают параметры:
x, y — координата левого верхнего угла прямоугольника.
width, height — ширина и высота прямоугольника
Вот так это выглядит на практике:
var canvas = document.getElementById(«canvas»);
if (canvas.getContext){
var ctx = canvas.getContext(‘2d’);
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
} else {
alert(‘Браузер не поддерживает Canvas.’);
}
В деле можно взглянуть тут.
Если вы ещё не в курсе как рисовать в Canvas вам сюда.