# Метод rect

Метод `rect` рисует в заданной точке прямоугольник. Видимым этот прямоугольник станет, только если применить метод `stroke` или `fill`. В первом случае будет контур, а во втором - фигура.

## Синтаксис

`контекст.rect(x, y, ширина, высота)`

## Пример

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

`<canvas id="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 id="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();`

:

## Смотрите также

- метод `fillRect`,
  который рисует закрашенный прямоугольник
- метод `strokeRect`,
  который рисует контур прямоугольника

← →
↑
en ru