How to Clear the Canvas for Redrawing

The <canvas> element helps you draw graphics on the fly via JavaScript. It is only a container for graphics, and JavaScript is required for drawing the graphics. In this tutorial, you will learn dos and don'ts of clearing the canvas for redrawing other images.

Watch a course JavaScript -The Complete Guide (Beginner + Advanced) 

<!DOCTYPE HTML>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="canvasId" width="500" height="200"></canvas>
    <script>
      let canvas = document.getElementById('canvasId');
      let context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(180, 90);
      context.bezierCurveTo(120, 90, 120, 160, 240, 160);
      context.bezierCurveTo(260, 190, 300, 170, 350, 150);
      context.bezierCurveTo(410, 140, 440, 130, 380, 110);
      context.bezierCurveTo(440, 50, 350, 40, 350, 50);
      context.bezierCurveTo(310, 10, 270, 30, 240, 40);
      context.bezierCurveTo(310, 10, 130, 15, 180, 90);
      // complete custom shape
      context.closePath();
      context.lineWidth = 7;
      context.strokeStyle = 'green';
      context.stroke();
    </script>
  </body>
</html>

To clear the Canvas, you can use the clearRect() method. This method performs pretty well than others for clearing the canvas (such as resetting the width/height, destroying the canvas element and then recreating it, etc..)

const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
Do not set the width to itself to clear the canvas: canvas.width = canvas.width;

Resetting canvas.width will resets all canvas state such as transformations, lineWidth, strokeStyle.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #button {
        position: absolute;
        top: 5px;
        left: 10px;
      }
      #button input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>
  <body data-rsssl=1>
    <canvas id="myCanvas" width="500" height="200"></canvas>
    <div id="button">
      <input type="button" id="clear" value="Clear">
    </div>
    <script>
      let canvas = document.getElementById('myCanvas');
      let context = canvas.getContext('2d');
      // begin custom shape
      context.beginPath();
      context.moveTo(180, 90);
      context.bezierCurveTo(120, 90, 120, 160, 240, 160);
      context.bezierCurveTo(260, 190, 300, 170, 350, 150);
      context.bezierCurveTo(410, 140, 440, 130, 380, 110);
      context.bezierCurveTo(440, 50, 350, 40, 350, 50);
      context.bezierCurveTo(310, 10, 270, 30, 240, 40);
      context.bezierCurveTo(310, 10, 130, 15, 180, 90);
      // complete custom shape
      context.closePath();
      context.lineWidth = 7;
      context.strokeStyle = 'green';
      context.stroke();
      // bind event handler to clear button
      document.getElementById('clear').addEventListener('click', function() {
          context.clearRect(0, 0, canvas.width, canvas.height);
        }, false);
    </script>
  </body>
</html>

Canvas

The canvas element is supported in versions of all major browsers. The canvas element has only two attributes: width and height. The default size is 300 px × 150 px (width × height). But custom sizes are defined using the CSS height and width properties. To draw graphics on the canvas, you should use a JavaScript context object that creates graphics on the fly. Canvas provides multiple methods for drawing paths, circles, boxes, texts, and adding images.