This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

fillRect

Summary

Paints the specified rectangular area using the color (or style) defined by fillStyle.

Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax

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

Parameters

x

Data-type
Number

The x-coordinate, in pixels, of the upper-left corner of the rectangle in relation to the coordinates of the canvas.

y

Data-type
Number

The y-coordinate, in pixels, of the upper-left corner of the rectangle in relation to the coordinates of the canvas.

width

Data-type
Number

The width, in pixels, of the rectangle in relation to the coordinates of the canvas. With value 0, the method has no effect.

height

Data-type
Number

The height, in pixels, of the rectangle in relation to the coordinates of the canvas. With value 0, the method has no effect.

Return Value

No return value

Examples

This example sets a solid color fill style, then draws and fills a rectangle on the canvas.

<canvas id="myCanvas" width="300" height="150" style="border:1px solid blue;"></canvas>
<p>. . .</p>
<script>
var can = document.getElementById("myCanvas");
var ctxt = can.getContext("2d");
ctxt.fillStyle = "orange";
ctxt.fillRect(20, 20, 50, 120);
</script>

Related specifications

W3C HTML Canvas 2D Context
W3C Candidate Recommendation

Attributions