Easy Tutorial
❮ Att Col Valign Tag Details ❯

HTML canvas rect() Method

HTML canvas Reference Manual

Example

Draw a rectangle with dimensions 150*100 pixels:

JavaScript:


Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the rect() method.

Note: Internet Explorer 8 and earlier versions do not support the <canvas> element.


Definition and Usage

The rect() method creates a rectangle.

Tip: Use the stroke() or fill() method to actually draw the rectangle on the canvas.

| JavaScript Syntax: | context.rect(x, y, width, height); | | --- | --- |

Parameter Values

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

More Examples

Example

Create three rectangles using the rect() method:

JavaScript:


❮ Att Col Valign Tag Details ❯