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
Microsoft Developer Network: Windows Internet Explorer API reference Article