strokeRect method

The strokeRect method draws a rectangle outline 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

javascriptcontext.strokeRect(x, y, width, height);

Example

Let's draw a rectangle with strokeRect:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.strokeRect(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 strokeStyle property
    that sets a line color