JSFiddle - React, Tailwind, and code Playground

by antelopelovefan

HTML

<canvas id="canvas" width="500" height="500"></canvas>

CSS

canvas { border: 1px solid #000 }

JavaScript

var setPixel = function(imageData, point, r, g, b, a) {
    a = typeof a == 'undefined' ? 255 : a;
    i = (point.x + point.y * imageData.width) * 4;
    
    imageData.data[i  ] = r;
    imageData.data[i+1] = g;
    imageData.data[i+2] = b;
    imageData.data[i+3] = a;
};

var line = function(ctx,p1,p2) {
 ctx.moveTo(p1[0],p1[1]);
 ctx.lineTo(p2[0],p2[1]);
 ctx.stroke();    
};

var rnd = function(maxRange) {
    return Math.floor(Math.random()*maxRange);
};

var midpoint = function(p1, p2) {
    return {x:Math.round((p1.x+p2.x)/2), y:Math.round((p1.y+p2.y)/2)};
};

var canvas = document.getElementById('canvas');  
var ctx = canvas.getContext('2d');  
var iter = 5000;


for(var i=0;i<iter;i++) {
}