JSFiddle - React, Tailwind, and code Playground

by jacomyal

HTML

<script src="http://jacomyal.github.io/conrad.js/javascripts/conrad.js"></script>
<div id="canvases">
  <canvas id="canvas1"></canvas>
  <canvas id="canvas2"></canvas>
  <canvas id="canvas3"></canvas>
</div>

CSS

#canvases canvas {
  width: 100%;
  height: 100px;
  display: block;
  margin-bottom: 3px;
  border: solid 1px #f2f2f2;
}

JavaScript

function colorPixelJobFactory(canvas, color, count) {
  var ctx = canvas.getContext('2d');

  return function() {
    ctx.fillStyle = color;

    for (var i = count; i; i--)
      ctx.fillRect(
        Math.floor(canvas.width * Math.random()),
        Math.floor(canvas.height * Math.random()),
        1,
        1
      );

    return true;
  }
}

var jobs = {
  canvas1: [
    {
      id: 'canvas1_white',
      job: colorPixelJobFactory(document.getElementById('canvas1'), '#fff', 1000),
    },
    {
      id: 'canvas1_black',
      job: colorPixelJobFactory(document.getElementById('canvas1'), '#474747', 1000)
    }
  ],
  canvas2: [
    {
      id: 'canvas2_white',
      job: colorPixelJobFactory(document.getElementById('canvas2'), '#fff', 1000),
      weight: 2
    },
    {
      id: 'canvas2_black',
      job: colorPixelJobFactory(document.getElementById('canvas2'), '#474747', 1000)
    }
  ],
  canvas3: [
    {
      id: 'canvas3_white',
      job: colorPixelJobFactory(document.getElementById('canvas3'), '#fff', 1000),
      weight: 4
    },
    {
      id: 'canvas3_black',
      job: colorPixelJobFactory(document.getElementById('canvas3'), '#474747', 1000)
    }
  ]
};

// Bind "click" events:
var i,
    l,
    canvases = document.getElementsByTagName('canvas');

for (i = 0, l = canvases.length; i < l; i++) {
  canvases[i].addEventListener('click', function(e) {
    var a,
        id = e.target.id;

    if ((a = jobs[id].filter(function(o) { return conrad.hasJob(o.id); })).length)
      conrad.killJob(a.map(function(o) { return o.id; }));
    else
      conrad.addJob(jobs[id]);
  });
}

// Bind "resize" on window:
window.onresize = function() {
  var i,
      l,
      id,
      canvases = document.getElementsByTagName('canvas');

  for (i = 0, l = canvases.length; i < l; i++) {
    // Update width and height:
    canvases[i].width = canvases[i].offsetWidth - 2;
    canvases[i].height = canvases[i].offsetHeight - 2;

    // Restart jobs that are stopped:
   ...