title: Skewing images individually using canvas
body: <p>I'm using an HTML5 canvas to create a series of trees and their corresponding shadows. I want each shadow to be based on the position of a light source. I can draw each tree and it's shadow as well as skew all the shadows at once, but trying to skew each shadow individually eludes me. Here's my code:</p>
  
  <pre><code>var ctx = cvs[0].getContext('2d');
  ctx.save();
  //skew the canvas
  ctx.transform(1,0,0.3,-1,0,0);
  
  ctx.drawImage(tree1,74,-117,20,40);
  ctx.drawImage(tree1,126,-125,20,40);
  
  var imgd = ctx.getImageData(0, 0, 500, 300);
  var pix = imgd.data;
  //convert the drawn trees to shadows
  for (var i = 0, n = pix.length; i &lt; n; i += 4) {
      pix[i  ] = 0;   // red
      pix[i+1] = 0;   // green
      pix[i+2] = 0;   // blue
      // alpha
  }
  ctx.putImageData(imgd, 0, 0);
  
  //remove the skewing
  ctx.restore();
  
  //draw full color trees
  ctx.drawImage(tree1,50,40,20,40);
  ctx.drawImage(tree1,100,50,20,40);
  </code></pre>
  
  <p>Is there a way to skew the images as I draw them using drawImage? Thanks in advance!</p>