JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<canvas id=canvas width=300 height=200>

JavaScript

function getPixel(imageData, x,y){
    index = (x + y * imageData.width) * 4;
    return {
        r: imageData.data[index+0],
        g: imageData.data[index+1],
        b: imageData.data[index+2],
        a: imageData.data[index+3]
    }
}
(function (global){
   var canvas = document.createElement('canvas');
 
global.copyBuffer = function copyBuffer(imageData){
    canvas.width = imageData.width;
    canvas.height = imageData.height;
    var c = canvas.getContext('2d');
    blit(c, imageData);
    return c.createImageData(imageData.width, imageData.height);
}
})(this)
function setPixel(imageData, x, y, r, g, b, a) {
    index = (x + y * imageData.width) * 4;
    imageData.data[index+0] = r;
    imageData.data[index+1] = g;
    imageData.data[index+2] = b;
    imageData.data[index+3] = a;
}

function cls(imageData, r,g,b,a){
    for(var i = 0, max = imageData.width; i<max; i++){
        for(var j = 0, jmax = imageData.height; j<jmax; j++)
            setPixel(imageData, i, j, r,g,b,a);    
    }
}

function xor(imageDataIn, imageDataMask){
/*    for(var i = 0, max = imageDataIn.width; i<max; i++){
        for(var j = 0, jmax = imageDataIn.height; j<jmax; j++)
            var In = getPixel(imageDataIn, i, j)
            var mask = getPixel(imageDataMask, i, j)
            
            setPixel(imageDataIn, i, j, In.r^mask.r, In.g^mask.g, In.b^mask.b, In.a^mask.a);    
    }
*/
    for(var i=0, max = imageDataIn.width*imageDataIn.height*4; i<max; i++){
        imageDataIn.data[i] ^= imageDataMask.data[i];
    }
}

function blit(context, imageData){
    context.putImageData(imageData, 0, 0);
}


var canvas = $('canvas')
var c = canvas.getContext('2d');
var imageData = c.createImageData(300, 200);

cls(imageData, 250, 12, 28, 255)
var copy = copyBuffer(imageData);
cls(copy, 0, 210, 23, 0)
xor(imageData, copy)
blit(c, imageData)