clearRect() Method
The clearRect() Method is used to clear the area inside the rectangle.
Syntax
context.clearRect( x, y, width, height );
Attributes
- x: The x-coordinate in clearRect is one of the parameters of the upper-left corner of the rectangle.
- y: The y-coordinate in clearRect is one of the parameters of the upper-left corner of the rectangle.
- width: The width of the rectangle to clear the area in pixels.
- height: The height of the rectangle to clear the area in pixels.
Example 3: The example shows the rectangle on canvas using clearRect().
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Canvas Rectangle</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="geeks"> w3wiki </div> <div class="textele"> HTML Canvas Clear Rectangle </div> <canvas height="400" width="400" id="canvas-ele"> </canvas> <script src="script.js"></script> </body> </html> |
CSS
@import url( 'https://fonts.googleapis.com/css2?family=Poppins&display=swap'); body { font-family: 'Poppins', sans-serif; } .geeks { font-size: 40px; color: green; } #canvas-ele { border: 5px solid black; } .textele{ font-size: 20px; } |
Javascript
const canvas_element = document.getElementById("canvas-ele") const context = canvas_element.getContext("2d"); // For Blue Rectangle context.fillStyle = "blue"; context.fillRect(100, 100, 200, 200) context.clearRect(120, 120, 100, 100) context.stroke() |
Output:
HTML Canvas Rectangles using clearRect()
HTML Canvas Rectangles
The HTML Canvas Rectangles facilitate the rect() method to draw rectangles on canvas. There are various attributes in the rect(x, y, width, height) method such as x and y defining the coordinates of the upper-left corner of the rectangle, width defining the width of the rectangle, and height defining the height of the rectangle.