Using jquery, how can I clear items from a canvas?

Question

I am using this jquery code to have falling confetti on a page. Here is the demo page.

It works well and I see I can the start and stop functions to controls the updates from happening but I don't see a "clear()" method that would remove all of the confetti from the canvas.

Here is my html below, I have a background on my canvas and I don't want that to be removed but I simply want a way to clear out all of the confetti from the canvas so I only see the background image.

 <canvas style="background-repeat:no-repeat;background-image: url('/Content/Images/myImage.png');" id="confetti" width="1" height="1"></canvas>

Most likely a duplicate of [How to clear the canvas for redrawing](http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing) and for retrieving the context [MDN: HTMLCanvasElement.getContext()](https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement/getContext#Examples) — t.niese, Oct 15 '15 at 14:03

score 1 · Accepted Answer · answered Oct 15 '15 at 14:16

You could add a clear() yourself:

// Somewhere inside this
confetti.Context = function (id) {
  ...
  this.clear = function () {
    this.stop();
    context.clearRect(0, 0, canvas.width, canvas.height);
  }
  ...
}

Then this can be called anywhere else in your code like:

confetti.clear();

Using jquery, how can I clear items from a canvas?

1 Answers1