JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

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

CSS

body{ background-color: ivory; }
canvas{border:1px solid blue;}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// test data fill a 30x20 canvas with red pixels
var canvasWidth = 30;
var canvasHeight = 20;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var d = [];
for (var i = 0; i < canvasWidth * canvasHeight; i++) {
    // red & alpha=255 green & blue = 0
    d.push(255, 0, 0, 255);
}

var imgData = ctx.createImageData(canvasWidth, canvasHeight);
var data = imgData.data;

for (var i = 0; i < data.length; i++) {
    data[i] = d[i];
}


ctx.putImageData(imgData, 0, 0);