javascripthtmlcanvashtml5-canvascomposite

How to clear the canvas for redrawing

After experimenting with composite operations and drawing images on the canvas I'm now trying to remove images and compositing. How do I do this?

I need to clear the canvas for redrawing other images; this can go on for a while so I don't think drawing a new rectangle every time will be the most efficient option.

Solution

  • Given that canvas is a canvas element or an OffscreenCanvas object, use clearRect:

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