title: HTML5: Green screen effect on JPGs
body: <p>Since JPGs don't support transparency and in my case, PNGs are far too large, I'm trying to replace a colour (my example is white) by setting the alpha colour. My code is roughly based on this: <a href="http://tech.pro/tutorial/1281/chroma-key-video-effects-using-javascript-and-the-html5-canvas-element" rel="nofollow">http://tech.pro/tutorial/1281/chroma-key-video-effects-using-javascript-and-the-html5-canvas-element</a></p>
  
  <p>The problem is, it doesn't do anything! Also, setting the frames colour to anything also doesn't seem to update. I know it is something simply, I just can't crack it.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="poo"&gt;
      &lt;div id="container"&gt;
          &lt;img id="source" src="http://i.imgur.com/RylDs1h.jpg" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#greend{
      background:black;
      width:600px;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var img = $("img").get(0);
  var $canvasbg = $("&lt;div id='greend' /&gt;");
  var canvas = $("&lt;canvas&gt;&lt;/canvas&gt;").get(0);
  $canvasbg.append(canvas);
  $('#container').append($canvasbg);
  
  var $container =  $('#container');   
  var context = canvas.getContext('2d');
  
  canvas.width = img.clientWidth;
  canvas.height = img.clientHeight;
  $container.width(img.clientWidth);
  $container.height(img.clientHeight);
  context.drawImage(img, 0, 0);
  
  var frame = context.getImageData(0, 0, canvas.width, canvas.height);    
  var length = frame.data.length;
  for (var i =0; i &lt;length; i++){
      var r = frame.data [i*4+ 0];
      var g = frame.data [i*4 + 1];
      var b = frame.data [i*4 + 2];
  
      // replace white-ish colours.
      if(g &gt; 240 &amp;&amp; g &lt; 256 &amp;&amp; r &gt; 240 &amp;&amp; r &lt; 256 &amp;&amp; b &gt; 240 &amp;&amp; b &lt; 256){  
          frame.data[i * 4 + 3] = 0;  
      } 
  }
  context.putImageData(frame, 0, 0);
  </code></pre>
  
  <p>jsFiddle here: <a href="http://jsfiddle.net/Bhqq8/2/" rel="nofollow">http://jsfiddle.net/Bhqq8/2/</a></p>