How to Clear Canvas in JavaScript

The HTML <canvas> element is a bitmap you draw on with JavaScript. Whenever you redraw a frame, reset a drawing, or let a user wipe their work, you need to clear part or all of that bitmap. This article shows how to clear a canvas in JavaScript with clearRect(), including clearing the whole surface, wiring the call to a button, and erasing only a region.

Clear the Entire Canvas with clearRect()

clearRect() is a method of the 2D rendering context (CanvasRenderingContext2D), not of the <canvas> element itself. You call it on the context object returned by canvas.getContext('2d'). It takes four arguments — the x and y coordinates of the rectangle’s top-left corner, plus its width and height — and erases every pixel inside that rectangle, making them fully transparent.

To clear the whole canvas, pass a rectangle that covers the entire bitmap:

context.clearRect(0, 0, canvas.width, canvas.height);

Here canvas.width and canvas.height are the canvas element’s own width and height attributes — its bitmap dimensions in pixels. Because the rectangle starts at the origin and spans the full bitmap, clearRect() wipes everything previously drawn. Run this example to see the call that clears a 680-by-420 bitmap:

const canvas = { width: 680, height: 420 };
console.log(`context.clearRect(0, 0, ${canvas.width}, ${canvas.height})`);

context.clearRect(0, 0, 680, 420)

Create and Draw on a Canvas

A <canvas> element is only a container; JavaScript does the drawing through the context object. The following example creates a 680-by-420 canvas and strokes a red curve on it so there is visible content to clear. Save it as an .html file and open it in a browser — the page examples in this article run in a browser and are not executed in this article’s test environment.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Creating a canvas</title>
  </head>
  <body>
    <canvas id="canvsId" width="680" height="420"></canvas>
    <script>
      let canvas = document.getElementById('canvsId');
      let context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(180, 90);
      context.bezierCurveTo(120, 80, 110, 170, 250, 170);
      context.bezierCurveTo(260, 190, 300, 160, 370, 140);
      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);
      context.closePath();
      context.lineWidth = 8;
      context.strokeStyle = 'red';
      context.stroke();
    </script>
  </body>
</html>

The rendered page shows the red outline drawn on the canvas:

Clear the Canvas with a Button

To let the user trigger the clear, attach a click handler to a button and call clearRect() inside it. The page below reuses the same drawing, adds an input button with the id clear, and registers a listener that erases the whole bitmap on each click.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Clear a canvas with a button</title>
    <style>
      #button {
        position: absolute;
        top: 5px;
        left: 10px;
      }
      #button input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvs" width="680" height="420"></canvas>
    <div id="button">
      <input type="button" id="clear" value="Clear">
    </div>
    <script>
      let canvas = document.getElementById('myCanvs');
      let context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(180, 90);
      context.bezierCurveTo(120, 80, 110, 170, 250, 170);
      context.bezierCurveTo(260, 190, 300, 160, 370, 140);
      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);
      context.closePath();
      context.lineWidth = 8;
      context.strokeStyle = 'red';
      context.stroke();
      document.getElementById('clear').addEventListener('click', function() {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }, false);
    </script>
  </body>
</html>

Open the page and the button appears above the canvas:

After the click, clearRect(0, 0, canvas.width, canvas.height) removes every drawn pixel. The canvas becomes transparent, so the page behind it shows through where the drawing used to be:

Clear Part of a Canvas and Avoid Common Mistakes

clearRect() erases a rectangle, not necessarily the whole canvas. To remove only part of a drawing, pass that region’s coordinates and size — for example, context.clearRect(180, 90, 200, 80) wipes a 200-by-80 patch starting at (180, 90). Pixels inside the rectangle become transparent while the rest of the drawing stays intact, which is useful for redrawing a moving object or a single panel.

A few details commonly cause confusion:

• canvas.width and canvas.height are the bitmap’s pixel dimensions, set by the element’s attributes or by JavaScript. CSS width and height only scale how the canvas is displayed; they do not resize the bitmap, so they are the wrong values to pass to clearRect(). A CSS-stretched canvas looks bigger on the page but keeps the same drawable area.
• clearRect() follows the current transform. If you called translate(), rotate(), or scale(), the rectangle you pass is transformed too. Call context.setTransform(1, 0, 0, 1, 0, 0) first when you want to clear in raw bitmap coordinates. An active clipping region can also limit which pixels get erased.
• Clearing restores transparent pixels rather than painting white, so anything behind the canvas — a page background or stacked elements — becomes visible again in the cleared region.
• The 2D canvas API, including clearRect(), works in all modern browsers, but very old browsers may not support <canvas> at all, so do not rely on universal availability for legacy targets.