JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<input type='file' accept='mca/plain' onchange='openFile(event)'><br>
<canvas id="can"></canvas>

JavaScript

var ctx = can.getContext('2d'),
  r;
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

var openFile = function(event) {
  var input = event.target;

  var reader = new FileReader();
  reader.onload = function() {
    r = new Uint8Array(reader.result);
    print()
  };
  reader.readAsArrayBuffer(input.files[0]);
};

function print() {
  console.log(r)
  let x = 0,
    y = 0,
    z = 0
  r.forEach((e) => {
    if (e != 0) {
      if (x % 128 == 0) {
        y++
        x = 0
      }
      x++
      ctx.fillStyle = `hsl(${e}, 100%, 50%)`;
      ctx.fillRect(x * 3, y * 3, 3, 3);
    }
  })
  console.log(y)
}