How to clear the canvas for redrawing

javascript

canvas-engineering

performance

best-practices

byNikita Barsukov·Sep 21, 2024

Quickly reinitialize your canvas by applying clearRect from your canvas 2D context:

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

This line of code ensures that the canvas is wiped clean, ready to host new illustrations!

Enhancing performance with clearRect

Performance efficiency is crucial, especially in canvas redrawing. This requirement becomes even more imperative within dynamic graphics and interactive applications. Here are some practices for achieving optimal canvas performance:

State preservation: If you use transformations on your canvas, use context.save() before clear operations and context.restore() afterwards to maintain the transformation state.
Avoid direct reset: While canvas.width = canvas.width does clear the canvas, it also resets all context states. This could be an inefficient operation when dealing with complex context settings.
Reset transformations: If preserving state isn't a necessity, consider resetting the transform matrix before clearing with context.setTransform(1, 0, 0, 1, 0, 0);.
Define clear() function: If you are using clearRect repeatedly, consider encapsulating the logic in a clear() method added to CanvasRenderingContext2D.prototype.

How to handle paths post clearRect

Post-clearing the canvas, it's quite handy to start a fresh drawing path as follows:

context.beginPath(); // Let's start fresh, shall we?

This becomes paramount when you're creating line segments, paths or shapes without fillings.

Canvas size matters

The dimensions of a canvas greatly impact the clearing performance:

Size optimization: Larger canvases may benefit from a customized clear() function.
Performance check: Always benchmark the performance using Chrome Developer Tools to find the most efficient method for your use case.

Clear only when necessary

There may be scenarios where clearing the entire canvas isn't required:

Partial updates: If only a certain area of your canvas requires redrawing, save resources by only clearing and redrawing that specific area.
Overdraw: If subsequent drawings will completely cover up previous ones, you might not need to clear the canvas at all.

Maintaining transformation integrity

Preserving transformation state during canvas clearing is key. It's crucial to either save then restore or reset transformations during the clearing process to avoid skewed drawings.

Troubleshooting common pitfalls

While clearRect() is a handy tool, it does come with its own set of common problems:

Incomplete clearing: If certain elements still show up post-clearing, verify that no global transformations are inadvertently scaling your clear region.
Flickering animations: If sequential clearing and redrawing lead to noticeable flickering, consider using double-buffering solutions like OffscreenCanvas.

Upgrading CanvasRenderingContext2D Prototype

Embedding your custom clear() function within CanvasRenderingContext2D.prototype allows for a neat integration, making the clearing function accessible across the codebase:

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0); // Presto! Transform reset!
    }
    this.clearRect(0, 0, this.canvas.width, this.canvas.height); // Cleanse it all!
    if (preserveTransform) {
      this.restore(); // Ahh, back to normal!
    }
};