title: How do I erase image with cursor to reveal another image?
body: <p>Okay, so I know there is a similar post to this (<a href="https://stackoverflow.com/questions/11903404/javascript-erase-image-with-cursor">javascript erase image with cursor</a>) but I've seen it and the code linked in the answers and I was wondering if there was a way to edit <a href="http://jsfiddle.net/ArtBIT/WUXDb/1/" rel="nofollow noreferrer">the code</a> so that instead of erasing a solid color to reveal an image, I could erase an image to reveal a different image.</p>
  
  <p>This is the code/markup from the site.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="canvas"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#canvas {
  background:url(http://www.topscratchcards.com/images/games/888ladies/scratchcard-winning-ticket.jpg);
  width: 531px;
  height: 438px;
  }
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>(function() {
  // Creates a new canvas element and appends it as a child
  // to the parent element, and returns the reference to
  // the newly created canvas element
  
  
  function createCanvas(parent, width, height) {
  var canvas = {};
  canvas.node = document.createElement('canvas');
  canvas.context = canvas.node.getContext('2d');
  canvas.node.width = width || 100;
  canvas.node.height = height || 100;
  parent.appendChild(canvas.node);
  return canvas;
  }
  
  function init(container, width, height, fillColor) {
  var canvas = createCanvas(container, width, height);
  var ctx = canvas.context;
  // define a custom fillCircle method
  ctx.fillCircle = function(x, y, radius, fillColor) {
    this.fillStyle = fillColor;
    this.beginPath();
    this.moveTo(x, y);
    this.arc(x, y, radius, 0, Math.PI * 2, false);
    this.fill();
  };
  ctx.clearTo = function(fillColor) {
    ctx.fillStyle = fillColor;
    ctx.fillRect(0, 0, width, height);
  };
  ctx.clearTo(fillColor || "#ddd");
  
  // bind mouse events
  canvas.node.onmousemove = function(e) {
    if (!canvas.isDrawing) {
      return;
    }
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    var radius = 20; // or whatever
    var fillColor = '#ff0000';
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillCircle(x, y, radius, fillColor);
  };
  canvas.node.onmousedown = function(e) {
    canvas.isDrawing = true;
  };
  canvas.node.onmouseup = function(e) {
    canvas.isDrawing = false;
  };
  }
  
  var container = document.getElementById('canvas');
  init(container, 531, 438, '#ddd');
  
  })();
  </code></pre>
  
  <p>I don't know if there is a way to edit this code to achieve what I want - if there isn't then is there any alternative method/code I could use?</p>