Latest web development tutorials
 

HTML canvas strokeRect() Method

< Canvas Object

Example

Draw a 150*100 pixels rectangle:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);
Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
strokeRect() 4.0 9.0 3.6 4.0 10.1

Definition and Usage

The strokeRect() method draws a rectangle (no fill). The default color of the stroke is black.

Tip: Use the strokeStyle property to set a color, gradient, or pattern to style the stroke.

JavaScript syntax: context.strokeRect(x,y,width,height);

Parameter Values

Parameter Description Play it
x The x-coordinate of the upper-left corner of the rectangle Play it »
y The y-coordinate of the upper-left corner of the rectangle Play it »
width The width of the rectangle, in pixels Play it »
height The height of the rectangle, in pixels Play it »

< Canvas Object