Canvas on Node for some simple button images

create_images.coffee

Canvas = require 'canvas'
fs = require 'fs'
path = require 'path'


render = (width, height, draw, filePath) ->
  canvas = new Canvas(width, height)
  draw.call canvas.getContext '2d'
  out = fs.createWriteStream filePath
  stream = canvas.createPNGStream()
  stream.on 'data', (chunk) -> out.write chunk
  stream.on 'end', -> console.log "Created: #{filePath}"


imgDir = path.join __dirname, 'tmp' # '../webapp/media/img'

items =

  square: [18, 9, ( ->
      @fillStyle = 'rgba(255,255,255, 1.0)'
      @beginPath()
      @lineTo 2, 2
      @lineTo 8, 2
      @lineTo 8, 8
      @lineTo 2, 8
      @fill()
    ), "#{imgDir}/nav-square.png"]

  arrow: [18, 9, ( ->
      @fillStyle = 'rgba(255,255,255, 1.0)'
      @beginPath()
      @lineTo 3, 1
      @lineTo 8, 5
      @lineTo 3, 9
      @fill()
    ), "#{imgDir}/nav-arrow.png"]


  play: [16, 16, ( ->
      @font = '15px Webdings'; @fillText "4", -1, 12
    ), "#{imgDir}/play.png"]

  pause: [16, 16, ( ->
      @font = '14px Webdings'; @fillText ";", 0, 12
    ), "#{imgDir}/pause.png"]

  pointup: [16, 16, (->
      @font = '14px Wingdings'; @fillText "Ç", 0, 12
    ), "#{imgDir}/pointup.png"]


selected = process.argv[2..]
if not selected.length
  for key of items
    selected.push key
for key in selected
  render.apply null, items[key]