var cnv = document.getElementById('canvas');
var ctx = cnv.getContext('2d');
ctx.width = ctx.width; // Clear the context

// Draw some shapes to test the alpha.
function drawAlpha(x, y, alpha) {
  ctx.save();
  ctx.globalAlpha = alpha;

  // Draw the circle.
  ctx.beginPath();
  ctx.fillStyle = "#800080";
  ctx.arc(x, y, 25, 0, 2 * Math.PI, false);
  ctx.fill();

  // Draw a square.   
  ctx.beginPath();
  ctx.fillStyle	= "#408F40";
  ctx.rect(x, y, 50, 50);
  ctx.fill();

  ctx.restore();
}

// Draw the shapes demonstrating the current
// compositing settings.
function drawComposite(x, y, op) {
  ctx.save();

  // Create a clipping rectangle to limit the compositing
  // operation just to the part of the screen containing
  // the shapes being drawn.
  ctx.beginPath();
  ctx.rect(x - 25, y - 25, 75, 75);
  ctx.clip();

  // Draw the circle using the default operation.
  ctx.beginPath();
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = "#FF8080";
  ctx.arc(x, y, 25, 0, 2 * Math.PI, false);
  ctx.fill();

  // Draw the rectangle using the operation.
  ctx.beginPath();
  ctx.globalCompositeOperation = op;
  ctx.fillStyle = "#4040FF";
  ctx.rect(x, y, 50, 50);
  ctx.fill();

  ctx.restore();
}

// Demonstrate the compositing operations.
drawComposite(50, 50, 'source-over');
drawComposite(150, 50, 'destination-over');
drawComposite(50, 150, 'source-atop');
drawComposite(150, 150, 'source-in');
drawComposite(250, 150, 'source-out');
drawComposite(50, 250, 'destination-atop');
drawComposite(150, 250, 'destination-in');
drawComposite(250, 250, 'destination-out');
drawComposite(50, 350, 'lighter');
drawComposite(150, 350, 'copy');
drawComposite(250, 350, 'xor');

// The global alpha can be used to control the
// transparency of all rendering operations, without
// needing to use the rgba format for specifying
// colours.
drawAlpha(50, 450, 1.0);
drawAlpha(150, 450, 0.75);
drawAlpha(250, 450, 0.25);