THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML canvas clearRect() Method

❮ HTML Canvas Reference

Example

Clear a rectangle within a given rectangle:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
ctx.clearRect(20, 20, 100, 50);
Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
clearRect() Yes 9.0 Yes Yes Yes

Definition and Usage

The clearRect() method clears the specified pixels within a given rectangle.

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

Parameter Values

Parameter Description Play it
x The x-coordinate of the upper-left corner of the rectangle to clear Play it »
y The y-coordinate of the upper-left corner of the rectangle to clear Play it »
width The width of the rectangle to clear, in pixels Play it »
height The height of the rectangle to clear, in pixels Play it »

❮ HTML Canvas Reference