Draws SMPTE test color bars on a Canvas element.

colorbars.js

// Takes a canvas context2d and draws the SMPTE test color bars on it.
function drawSMPTEColorBars(c, x, y, w, h) {
  c.save();
  c.translate(x, y); c.scale(w / 1920, h / 1080);
  var g = c.createLinearGradient(445, 0, 1680, 0);
  g.addColorStop(0, '#000000');
  g.addColorStop(1, '#ffffff');
  c.fillStyle='#000000'; c.fillRect(0, 0, 1920, 1080);
  c.fillStyle='#666666'; c.fillRect(0, 0, 240, 630);
  c.fillStyle='#bfbfbf'; c.fillRect(240, 0, 205, 630);
  c.fillStyle='#bfbf00'; c.fillRect(445, 0, 206, 630);
  c.fillStyle='#00bfbf'; c.fillRect(651, 0, 206, 630);
  c.fillStyle='#00bf00'; c.fillRect(857, 0, 206, 630);
  c.fillStyle='#bf00bf'; c.fillRect(1063, 0, 206, 630);
  c.fillStyle='#bf0000'; c.fillRect(1269, 0, 206, 630);
  c.fillStyle='#0000bf'; c.fillRect(1475, 0, 205, 630);
  c.fillStyle='#666666'; c.fillRect(1680, 0, 240, 630);
  c.fillStyle='#00ffff'; c.fillRect(0, 630, 240, 90);
  c.fillStyle='#00214c'; c.fillRect(240, 630, 205, 90);
  c.fillStyle='#bfbfbf'; c.fillRect(445, 630, 1235, 90);
  c.fillStyle='#0000ff'; c.fillRect(1680, 630, 240, 90);
  c.fillStyle='#ffff00'; c.fillRect(0, 720, 240, 90);
  c.fillStyle='#32006a'; c.fillRect(240, 720, 205, 90);
  c.fillStyle=g; c.fillRect(445, 720, 1235, 90);
  c.fillStyle='#ff0000'; c.fillRect(1680, 720, 240, 90);
  c.fillStyle='#262626'; c.fillRect(0, 810, 240, 270);
  c.fillStyle='#000000'; c.fillRect(240, 810, 309, 270);
  c.fillStyle='#ffffff'; c.fillRect(549, 810, 411, 270);
  c.fillStyle='#050505'; c.fillRect(1268, 810, 69, 270);
  c.fillStyle='#0a0a0a'; c.fillRect(1405, 810, 69, 270);
  c.fillStyle='#262626'; c.fillRect(1680, 810, 240, 270);
  c.restore();
}