HTML canvas fillRect() Method |

• Vue
• AI
• Bootstrap
• Search

JavaScript Reference Manual

Overview

JavaScript Objects

JavaScript Array ObjectJavaScript Boolean ObjectJavaScript Date ObjectJavaScript Math ObjectJavaScript Number ObjectJavaScript String ObjectJavaScript RegExp ObjectJavaScript Global Properties/FunctionsJavaScript OperatorsJavaScript Error

Browser Objects

Window ObjectNavigator ObjectScreen ObjectHistory ObjectLocation ObjectStorage Objects

DOM Objects

HTML DOM Document ObjectHTML DOM Element ObjectHTML DOM Attribute ObjectHTML DOM Event ObjectHTML DOM Console ObjectCSSStyleDeclaration ObjectDOM HTMLCollection

HTML Objects

<a><area><audio><blockquote><button><col><colgroup><del><details><dialog><fieldset><img><ins> - button - checkbox - color - date - datetime - datetime-local - email - file - hidden - image - month - number - range - password - radio - reset - search - submit - text - time - url - week<label><legend><li><map><menu><meter><object><ol><progress><q><table><td><th><tr><textarea><title><time><track><video>

HTML DOM Button Object

<col>

HTML canvas fillRect() Method

Canvas Object

Example

Draw a filled rectangle of 150*100 pixels:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

Try it Yourself »

---

Browser Support

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

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

---

Definition and Usage

The fillRect() method draws a "filled" rectangle. The default fill color is black.

Tip: Use the fillStyle property to set the color, gradient, or pattern used for the fill.

JavaScript syntax:

context.fillRect(x,y,width,height);

Parameter Values

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

---

Canvas Object