Generate images from groups of CTA L lines and generate data URLs for use as iOS home screen icons.

ctaIcons.js

var ctaColors = {
  blue: '#00A1DE',
  brown: '#62361B',
  green: '#009B3A',
  orange: '#F9461C',
  pink: '#E27EA6',
  purple: '#522398',
  red: '#C60C30',
  yellow: '#F9E300'
}

var iconLayouts = {
  1: [
    [0, 0, 100, 100]
  ],
  2: [
    [0, 0, 50, 100], // left
    [50, 0, 50, 100] // right
  ],
  3: [
    [0, 0, 33, 100], // top
    [33, 0, 34, 100], // middle
    [67, 0, 33, 100] // bottom
  ],
  4: [
    [0, 0, 50, 50], // top left
    [50, 0, 50, 50], // top right
    [0, 50, 50, 50], // bottom left
    [50, 50, 50, 50] // bottom right
  ],
  5: [
    [0, 0, 50, 50], // top left
    [50, 0, 50, 50], // top right
    [0, 50, 50, 50], // bottom left
    [50, 50, 50, 50], // bottom right
    [25, 25, 50, 50] // centered on everything
  ],
  6: [
    [0, 0, 33, 50], // top left
    [33, 0, 34, 50], // top middle
    [67, 0, 33, 50], // top right
    [0, 50, 33, 50], // bottom left
    [33, 50, 34, 50], // bottom middle
    [67, 50, 33, 50], // bottom right
  ]
}

var createCanvas = function(){
  var canvas = document.createElement('canvas');
  canvas.width = 100;
  canvas.height = 100;
  document.body.appendChild(canvas);
  return canvas;
}

var drawIcon = function(items){
  var canvas = createCanvas();
  var ctx = canvas.getContext('2d');

  var layout = iconLayouts[items.length];
  for(i=0; i<layout.length; i++){
    ctx.fillStyle = ctaColors[items[i]];
    ctx.fillRect(layout[i][0], layout[i][1], layout[i][2], layout[i][3]);
  }

  console.log("Data URL for " + items.length + " lines (" + items.join("/") + "): " + canvas.toDataURL());
}

drawIcon(['red']);
drawIcon(['green', 'pink']);
drawIcon(['red','yellow', 'purple']);
drawIcon(['orange', 'purple', 'pink', 'green']);
drawIcon(['pink', 'brown', 'purple', 'green', 'orange']);
drawIcon(['brown', 'purple', 'orange', 'green', 'pink', 'blue']);