JSFiddle - React, Tailwind, and code Playground

by Gustavo Carvalho

HTML

<canvas id="canvas" width=800px height=100px></canvas>

JavaScript

function getPixel(imageData, x, y) {
    "use strict";
    var index = 0, r, g, b;

    index = (x + y * imageData.width) * 4;
    r = imageData.data[index];
    g = imageData.data[index + 1];
    b = imageData.data[index + 2];

    return [r, g, b];
}

function setPixel(imageData, x, y, r, g, b, a) {
    "use strict";
    var index = 0;
    index = (x + y * imageData.width) * 4;
    imageData.data[index]     = r;
    imageData.data[index + 1] = g;
    imageData.data[index + 2] = b;
    imageData.data[index + 3] = a;
}

var element = document.getElementById("canvas");
var c       = element.getContext("2d");
var w       = element.width;
var h       = element.height;

// set buffer
var offScreenCanvas         = document.createElement('canvas');
offScreenCanvas.width       = w;
offScreenCanvas.height      = h;
var ctxOffscreen            = offScreenCanvas.getContext('2d');
var imgData                 = ctxOffscreen.getImageData(0, 0, w, h);

function init() {
    "use strict";
    var x, y, i, j, r, g, b;

    for (j = 0; j < 10; j += 1) {
        for (i = 0; i < 800; i += 1) {
            x = i;
            y = j;
            r = 255 - Math.round(Math.random() * 50);
            g = 0;
            b = 0;
            setPixel(imgData, x, y, r, g, b, 255);
        }
    }

    c.putImageData(imgData, 0, 0);
}

function animation() {
    "use strict";
    var a1, a2, a3, a4, r, g, b, i, j;

    // draw
    for (j = 9; j < 100; j += 1) {
        for (i = 0; i < 800; i += 1) {
            a1 = getPixel(imgData, i, j - 1);
            a2 = getPixel(imgData, i, j + 1);
            a3 = getPixel(imgData, i - 1, j);
            a4 = getPixel(imgData, i + 1, j);

            r = Math.round((a1[0] + a2[0] + a3[0] + a4[0]) / 4);
            g = Math.round((a1[1] + a2[1] + a3[1] + a4[1]) / 4);
            b = Math.round((a1[2] + a2[2] + a3[2] + a4[2]) / 4);

            setPixel(imgData, i, j, r, g, b, 255);
        }
    }

    // copy buffer onto the canvas
   ...