I'd like to see this adapted to express many facial hair styles.

You know, I really wanted to beat someone to the punch and create a canvas toy to do just that. Given two images of the same dimensions, render a bin-op of their pixels, where "bin-op" is a boolean operation.

Fucked if I know what I am doing wrong, but I just can't modify the data array of the canvas element's graphics context.imageData.

  var canvas, ctx;
  var image1, image2;
  var img_data1, img_data2;
  
  function load_images () {
      image1 = document.getElementById("image1");
      image2= document.getElementById("image2");
  }
  
  
  function load() {
      load_images();
      
      canvas = document.getElementById("cv");
      canvas.height = Math.max(image1.height, image2.height);
      canvas.width =  Math.max(image1.width, image2.width);
      ctx = canvas.getContext("2d");
      
      var tmp_canvas = document.createElement('CANVAS');
      tmp_canvas.height = canvas.height;
      tmp_canvas.width = canvas.width;
      var tmp_ctx = tmp_canvas.getContext("2d");
    
      img_data1 = ctx.getImageData(0, 0, canvas.width, canvas.height);
      img_data2 = tmp_ctx.getImageData(0, 0, canvas.width, canvas.height);
      ctx.drawImage(image1, 0, 0);
  
  
      // seems like I just can't modify the array data and see it updated on the display
      for(var i = 0; i <= img_data1.width; i++) {
      	for (var j = 0; j <= img_data1.height; j++) {
      	    var idx = 4 * (j * img_data1.width + i);
  	    img_data1.data[idx] = 0;
      	    img_data1.data[idx+1] = 0;
      	    img_data1.data[idx+2] = 0;
  	    img_data1.data[idx+3] = 0;
      	}
      }
  }

The call I am missing is canvas.putImageData(); and that seems like one of those HTML5 features that works in theory, but hardly in practice.