# rect method

The `rect` method draws a rectangle at the given point. This rectangle will become visible only if you apply the `stroke` or `fill` method. In the first case there will be a stroke, and in the second - a shape.

## Syntax

`context.rect(x, y, width, height)`

## Example

Let's draw a path with `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();`

:

## Example

Now let's draw a shape:

`<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();`

:

## See also

- the `fillRect` method
  that draws a filled rectangle
- the `strokeRect` method
  that draws the stroke of a rectangle

← →
↑
en ru