Makes a transparent emboss effect from a given image. Returns both, the original and embossed image. Useful for mouseover effects...

transparentEmboss.coffee

makeTransparentEmboss = (img) ->
  canvas = document.createElement("canvas")
  return [null, null] unless canvas.getContext

  canvas.width = img.width
  canvas.height = img.height

  ctx = canvas.getContext("2d")
  ctx.drawImage(img, 0, 0)

  normalDataURL = canvas.toDataURL("image/png")

  imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
  y = canvas.height
  loop
    offsetY = (y - 1) * canvas.width * 4
    offsetYPrev = (y - 2) * canvas.width * 4
    offsetYPrev = offsetY if y == 1

    x = canvas.width
    loop
      if x <= canvas.width && y <= canvas.height
        offset = offsetY + (x - 1) * 4
        offsetPrev = offsetYPrev + (x - 1) * 4
        offsetPrev = offset if x == 1

        deltaR = imageData.data[offset]     - imageData.data[offsetPrev - 4]
        deltaG = imageData.data[offset + 1] - imageData.data[offsetPrev - 3]
        deltaB = imageData.data[offset + 2] - imageData.data[offsetPrev - 2]

        delta = deltaR
        if Math.abs(deltaG) > Math.abs(delta)
          delta = deltaG
        if Math.abs(deltaB) > Math.abs(delta)
          delta = deltaB

	if delta < 0
          imageData.data[offset]     = \
          imageData.data[offset + 1] = \
          imageData.data[offset + 2] = -delta
          imageData.data[offset + 3] = 255
        else
          imageData.data[offset]     = \
          imageData.data[offset + 1] = \
          imageData.data[offset + 2] = \
          imageData.data[offset + 3] = 0
      x -= 1
      break if x <= 0
    y -= 1
    break if y <= 0
  ctx.putImageData(imageData, 0, 0, 0, 0, canvas.width, canvas.height)
  embossedDataURL = canvas.toDataURL("image/png")

  return [normalDataURL, embossedDataURL]