javascript tutorial - [Solved-5 Solutions] How to clear the canvas for redrawing - javascript - java script - javascript array

After experimenting with composite operations and drawing images on the canvas I'm now trying to remove images and compositing. How do WE do this? WE need to clear the canvas for redrawing other images; this can go on for a while so WE don't think drawing a new rectangle every time will be the most efficient option.

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

Use: context.clearRect(0, 0, canvas.width, canvas.height); This is the fastest and most descriptive way to clear the entire canvas.

Do not use: canvas.width = canvas.width; Resetting canvas.width resets all canvas state (e.g. transformations, lineWidth, strokeStyle, etc.), it is very slow (compared to clearRect), it doesn't work in all browsers, and it doesn't describe what we are actually trying to do. Dealing with transformed coordinates

If we have modified the transformation matrix (e.g. using scale, rotate, or translate) then context.clearRect(0,0,canvas.width,canvas.height) will likely not clear the entire visible portion of the canvas. The solution? Reset the transformation matrix prior to clearing the canvas:

// Store the current transformation matrix
context.save();

// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
context.restore();

Edit: I've just done some profiling and (in Chrome) it is about 10% faster to clear a 300x150 (default size) canvas without resetting the transform. As the size of our canvas increases this difference drops. That is already relatively insignificant, but in most cases we will be drawing considerably more than we are clearing and WE believe this performance difference be irrelevant.

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

If we are drawing lines, make sure we don't forget:

context.beginPath();

Otherwise the lines won't get cleared.

Others have already done an excellent job answering the question but if a simple clear() method on the context object would be useful to we (it was to me), this is the implementation WE use based on answers here:

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

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

    if (preserveTransform) {
      this.restore();
    }           
};

Usage:

window.onload = function () {
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');

  // do some drawing
  context.clear();

  // do some more drawing
  context.setTransform(-1, 0, 0, 1, 200, 200);
  // do some drawing with the new transform
  context.clear(true);
  // draw more, still using the preserved transform
};

So if we have a canvas and context created like this:

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

We can use a method like this:

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}