JSFiddle - React, Tailwind, and code Playground

by icodeforlove

JavaScript

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;
}

var canvas = document.createElement('canvas');
canvas.context = canvas.getContext('2d');

canvas.width = 1000;
canvas.height = 1000;
canvas.context.fillRect(0, 0, canvas.width, canvas.height);
document.body.appendChild(canvas);

var x = y = 0;

   var imgData = canvas.context.createImageData(canvas.width, canvas.height);    

function draw () {

    setPixel(imgData, x, y, 0, 0, 0, 0);  
    
    x+=1;
    y+=1;

    setPixel(imgData, x, y, 0, 0, 0, 255);
    canvas.context.putImageData(imgData, 0, 0);

    window.webkitRequestAnimationFrame(draw);
}

draw();