canvas example

messing with canvas

HTML

<canvas id="canvas" width="100" height="100">
            This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>

JavaScript

var my_canvas = document.getElementById('canvas'),
  context = my_canvas.getContext("2d");

const cellSize = 20;
const arr = ['#FF0000', '#FF0000', null, null, '#0000FF',
  '#FF0000', '#FF0000', '#FF0000', null, '#0000FF',
  '#FF0000', null, '#FF0000', null, '#0000FF',
  '#FF0000', '#FF0000', '#FF0000', null, '#0000FF',
  '#FF0000', '#FF0000', '#0000FF', '#0000FF', '#0000FF'
]

let col = 0;
let row = 0;
arr.forEach((item) => {
  if (item) {
    context.fillStyle = item;
    context.fillRect(
      col * cellSize,
      row * cellSize,
      cellSize,
      cellSize
    );
  }
  if (col === 4) {
    col = 0;
    row += 1;
  } else {
    col += 1;
  }
});