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.

JavaScript canvas element

<!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>

Try it Yourself »

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

Javascript Clear the Canvas

const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

Warning

Do not set the width to itself to clear the canvas: canvas.width = canvas.width;

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

Javascript Clear the Canvas

<!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>
    <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>

Try it Yourself »

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.