HTML reference manual

HTML tag大全

HTML canvas clearRect() method

clearRect() is a Canvas 2The clearRect() method is used to set all pixels in the specified rectangular area (starting from the point (x, y), the range is (width, height)) to transparent and erase all previously drawn content.

HTML canvas Reference Manual

Online example

Clear the rectangle within the given rectangle:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas clearRect() method usage (Basic Tutorial Website oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" 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.fillStyle="blue";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);
</script>
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, and Safari support clearRect() Method.

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

Definition and Usage

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

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

Parameter Value

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

HTML canvas Reference Manual

HTML: <template> tag