W3Schools.com

HTML5 canvas rect Method

HTML5 track Tag Reference HTML5 canvas reference

Example

Draw a 150*100 pixels rectangle:

Yor browser does not support the canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

Try it yourself »

Definition and Usage

The rect method creates a rectangle.

Use the stroke() or fill() methods to draw the rectangle on the canvas.

The rect method takes four parameters (x,y,w,h).

The first two parameters represents the x and y coordinates of where to place the rectangle in the canvas.

The last two parameters represents the size (width and height) of the rectangle.

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

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The rect method is supported in all major browsers.

Parameter Values

Parameter Values Description Play it
x x-coordinate The canvas' x-coordinate of where to place the upperleft corner of the rectangle Play it »
y y-coordinate The canvas' y-coordinate of where to place the upperleft corner of the rectangle Play it »
width width The width of the rectangle, in pixels Play it »
height height The height of the rectangle, in pixels Play it »

HTML5 track Tag Reference HTML5 canvas reference

WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Best Website Templates Top CSS Templates
CREATE HTML Websites
EASY WEBSITE BUILDER
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE