JSFiddle - React, Tailwind, and code Playground

by JeffC

HTML

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

JavaScript

var canvas = document.getElementById('c');
  var context = canvas.getContext('2d');
  var GAP = 10;
  var COLOR1 = 'red';
  var COLOR2 = 'blue';
  var STRIPES = 20;

  context.clearRect(0, 0, canvas.width, canvas.height);

  context.fillStyle = COLOR2;
  for (var i = 0; i < STRIPES / 2; i++) {
      context.fillRect((i * 2) * GAP, 0, GAP, 480);
  }
  context.fillStyle = COLOR1;
  for (var i = 0; i < STRIPES / 2; i++) {
      context.fillRect((i * 2 + 1) * GAP, 0, GAP, 480);
  }