Easy Tutorial
❮ Dom Obj Tablerow Prop Radio Form ❯

HTML canvas rect() Method

Canvas Object

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:


Canvas Object

❮ Dom Obj Tablerow Prop Radio Form ❯