3 ms·

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

• mahmud 16y ago
  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; } } }
  • mahmud 16y ago
    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.