RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/apis/canvas/CanvasRenderingContext2D/clearRect below:

clearRect · WebPlatform Docs

clearRect Summary

Clears all pixels on the canvas in the given rectangle (x, y, w, h) to transparent black.

Method of apis/canvas/CanvasRenderingContext2D apis/canvas/CanvasRenderingContext2D

Syntax

 context.clearRect(x, y, w, h);

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.

Data-type: Number

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

Data-type: Number

The width, in pixels, of the rectangle in relation to the coordinates of the canvas.

Data-type: Number

The height, in pixels, of the rectangle in relation to the coordinates of the canvas.

Return Value

No return value

Examples

This code example draws a filled rectangle by using fillRect and then clears the center portion by using clearRect. fillRect uses the width and height of the canvas, and clearRect uses percentages of the canvas width and height to create a frame.

<html>
<head>
<title>ClearRect example</title>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas>
<p>
    <button onclick="clearMe();">clear me</button>
    <button onclick="draw();">Reset</button>
</p>

<script>
    function draw() {
        var canvas = document.getElementById("MyCanvas"); 
        if (canvas.getContext) 
        {
            var ctx = canvas.getContext("2d"); 
            ctx.fillStyle = "black";  
            ctx.fillRect(0, 0, canvas.width, canvas.height);  
        }
    }
    function clearMe() {
        var canvas = document.getElementById("MyCanvas");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            
            ctx.clearRect(canvas.width * .1, canvas.height * .1, canvas.width * .8, canvas.height * .8);
        }
    }
  </script>

</body>
</html>

This example shows the clearRect method alone. The x,y,width, and height of the cleared rectangle are shown as percentages of the full width and height of the canvas.


ctx.clearRect(canvas.width * .1, canvas.height * .1, canvas.width * .8, canvas.height * .8);

Notes

The clearRect method clears the canvas to transparent black (that is, each pixel’s RGBA value is equal to zero). To clear to a specific color, use the fillRect method.

Related specifications

W3C HTML Canvas 2D Specification: W3C Candidate Recommendation

Attributions

Microsoft Developer Network: Windows Internet Explorer API reference Article

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4