HTML Reference Manual

HTML tag大全

HTML canvas fillRect() method

fillRect() is a Canvas 2D API method to draw filled rectangle. The starting point of the rectangle is at (x, y) position, the size of the rectangle is width and height, and the fillStyle property determines the style of the rectangle.

HTML canvas reference manual

Online Example

Drawing 100*100 pixel filled square:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas fillRect() method usage (Basic Tutorial Website oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,100,100);
</script>
</body>
</html>

Test See ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

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 fillStyle Properties to set the color, gradient, or pattern used to fill the drawing.

JavaScript Syntax:	context.fillRect(x,y,width,height);

Parameter Value

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

HTML canvas reference manual

HTML: <template> tag