JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="x" width="10" height="10"></canvas>
<div id="report">THE LINES OF COLOR ARE ABOVE THIS!</div>

JavaScript

var canvas = $("#x")[0];
var ctx = canvas.getContext("2d");

var byteArray = [ 
    255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255,
    0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 
    0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 
]
    
var imageData = ctx.getImageData(0, 0, 3, 3);

for(var i = 0; i < byteArray.length; i+=4){
    imageData.data[i] = byteArray[i];
    imageData.data[i+1] = byteArray[i + 1];
    imageData.data[i+2] = byteArray[i + 2];
    imageData.data[i+3] = byteArray[i + 3];
}

ctx.putImageData(imageData, 0, 0);