# Рисование прямоугольников через canvas на JavaScript

Квадраты и прямоугольники не обязательно рисовать с помощью комбинаций `moveTo`, `lineTo` - для этого есть методы и попроще. Давайте их разберем.

## Метод strokeRect

Метод `strokeRect`(x, y, ширина, высота) рисует в заданной точке контур прямоугольника. Первые два параметра задают координаты точки, в которой окажется верхний левый угол нарисованного прямоугольника.

Давайте нарисуем прямоугольник с помощью `strokeRect` (считаем, что `ctx` уже есть):

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.strokeRect(50, 50, 100, 75);`

:

## Метод fillRect

Метод `fillRect`(x, y, ширина, высота) работает также, как и `strokeRect`, только рисует закрашенный прямоугольник. Посмотрим на примере:

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.fillRect(50, 50, 100, 75);`

:

## Метод rect

Следующий метод `rect`(x, y, ширина, высота) также рисует прямоугольник. Но видимым этот прямоугольник станет, только если применить метод `stroke` или `fill`. В первом случае будет контур, а во втором - фигура.

Давайте нарисуем контур с помощью `rect`:

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.rect(50, 50, 100, 75); ctx.stroke();`

:

А теперь нарисуем фигуру:

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.rect(50, 50, 100, 75); ctx.fill();`

:

## Метод clearRect

Следующий метод `clearRect`(x, y, ширина, высота) работает как ластик, очищая прямоугольную область и делая содержимое совершенно прозрачным.

Давайте нарисуем квадратик с помощью `fillRect` и сотрем его часть с помощью `clearRect`:

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.fillRect(50, 50, 100, 100); ctx.clearRect(75, 75, 50, 50);`

:

← →
↑
en ru