JSFiddle - React, Tailwind, and code Playground

by javajosh

HTML

<h1>Why isn't setPixel() working?!</h1>
<canvas id="canvas1" width="150" height="150"</canvas>

CSS

canvas { border: 1px solid black; }

JavaScript

function setPixel(element, x, y, r, g, b, a) {
    var c = element.getContext("2d");
    var width = element.width;
    var height = element.height;
    
    var imageData = c.createImageData(width, height);
    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;
    c.putImageData(imageData, 0, 0);
}

var element = document.getElementById('canvas1');
var width = element.width;
var height = element.height;

setPixel(element, 50, 50, 240, 0, 0, 255)


// draw random dots
for (i = 0; i < 10000; i++) {
    x = Math.random() * width | 0; // |0 to truncate to Int32
    y = Math.random() * height | 0;
    r = Math.random() * 256 | 0;
    g = Math.random() * 256 | 0;
    b = Math.random() * 256 | 0;
    setPixel(element, x, y, r, g, b, 255); // 255 opaque
}