JSFiddle - React, Tailwind, and code Playground

by mynameiswilson

HTML

<canvas width="200" height="50" id="can1"></canvas>
<canvas width="600" height="150" id="can2"></canvas>

JavaScript

var setPixel = function(img, p, c) {
    c[3] = typeof c[3] == 'undefined' ? 255 : a;
    i = (p.x + p.y * img.width) * 4;
    
    img.data[i  ] = c[0];
    img.data[i+1] = c[1];
    img.data[i+2] = c[2];
    img.data[i+3] = c[3];
};


var can1 = $("#can1")[0]
var can1Ctx = can1.getContext('2d');
var img1 = can1Ctx.createImageData(can1.width,can1.height);
for(var i=0;i<can1.width*can1.height;i++) {
    console.log(i);
    var p = {x: i - (can1.width * Math.floor(i/can1.width)), 
             y: Math.floor(i/can1.width)};

    
    if (i%can1.width < can1.width/2) {
       var color = [0,255,0];
    } else {
       var color = [0,0,255];    
    }
    setPixel(img1,p,color);
}
can1Ctx.putImageData(img1,0,0);