How to clear canvas in html5

html5 Methods to clear canvas: 1. Use the "clearCanvas" method to clear the canvas; 2. Use the clearRect method to clear the canvas; 3. Fill the canvas with a specific color to clear the canvas.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer

html5 canvas clear canvas method

Summary as follows Three ways to clear the canvas:

1. The simplest method: Since the canvas content will be cleared whenever the height or width of the canvas is reset, you can use the following methods to clear it:

function clearCanvas()
{  
    var c=document.getElementById("myCanvas");  
    var cxt=c.getContext("2d");  
    c.height=c.height;  
}

2. Use the clearRect method:

function clearCanvas()  
{  
    var cxt=document.getElementById("myCanvas").getContext("2d");
    cxt.clearRect(0,0,c.width,c.height);  
}

3. Similar to method 2, you can fill the canvas with a specific color to achieve the purpose of clearing it:

function clearCanvas()  
{  
    var c=document.getElementById("myCanvas");  
    var cxt=c.getContext("2d");  
      
    cxt.fillStyle="#000000";  
    cxt.beginPath();  
    cxt.fillRect(0,0,c.width,c.height);  
    cxt.closePath();  
}

Recommended learning: " HTML video tutorial》

The above is the detailed content of How to clear canvas in html5. For more information, please follow other related articles on the PHP Chinese website!