offline version v3


244 of 264 menu

fillRect method

The fillRect method draws a filled rectangle at the given point. The first two parameters set the coordinates of the point where the upper left corner of the drawn rectangle will be.

Syntax

context.fillRect(x, y, width, height);

Example

Let's draw a filled rectangle with fillRect:

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

:

See also

  • the fillRect method
    that draws a filled rectangle
  • the rect method
    that draws a rectangle
  • the lineTo method
    that draws a line
  • the fillStyle property
    that sets the fill color
enru