Skip to content

Instantly share code, notes, and snippets.

@rtsinani
Forked from sstephenson/chalk.js.coffee
Created January 9, 2012 08:23
Show Gist options
  • Save rtsinani/1581894 to your computer and use it in GitHub Desktop.
Save rtsinani/1581894 to your computer and use it in GitHub Desktop.
window.addEventListener "DOMContentLoaded", ->
body = $ "body"
canvas = $ "#canvas"
chalkboard = $ "#chalkboard"
close = $ "#close"
ledge = $ "#ledge"
lightswitch = $ "#lightswitch"
output = $ "#output"
shade = $ "#shade"
share = $ "#share"
canvas.attr "width", chalkboard.width()
canvas.attr "height", chalkboard.height()
xOffset = yOffset = 0
context = canvas.get(0).getContext "2d"
context.lineWidth = 8
context.lineCap = "round"
context.lineJoin = "miter"
background = new Image
background.src = "/images/background.jpg"
background.onload = ->
context.drawImage background, -128, -129
updateOffsets = ->
offsets = chalkboard.offset()
xOffset = offsets.left
yOffset = offsets.top
window.addEventListener "orientationchange", updateOffsets
updateOffsets()
window.addEventListener "touchmove", (event) ->
event.preventDefault()
### Tools ###
createPattern = (name, callback) ->
image = new Image
image.src = "/images/chalk-tile-#{name}"
image.onload = -> callback context.createPattern image, "repeat"
setStroke = (pattern, width) ->
context.strokeStyle = pattern
context.lineWidth = width
whitePattern = redPattern = erasePattern = null
createPattern "white.png", (p) -> setStroke whitePattern = p, 8
createPattern "red.png", (p) -> redPattern = p
createPattern "erase.jpg", (p) -> erasePattern = p
tools = ["eraser", "red_chalk", "white_chalk"]
activeTool = ""
activateTool = (tool) ->
return if tool is activeTool
tools.splice tools.indexOf(tool), 1
tools.push activeTool = tool
$("##{id}, ##{id}_tool").css("z-index", index) for id, index in tools
$("#tools div.tool").removeClass "active"
$("##{id}_tool").addClass "active"
switch tool
when "red_chalk" then context.strokeStyle = setStroke redPattern, 8
when "white_chalk" then context.strokeStyle = setStroke whitePattern, 8
when "eraser" then context.strokeStyle = setStroke erasePattern, 32
activateTool "white_chalk"
ledge.delegate "a", "click", (target) ->
activateTool $(target).attr "id"
### Drawing ###
skip = false
count = 0
points = [null]
x = y = null
draw = (point) ->
if point
if skip
skip = false
else
context.moveTo x, y
[x, y] = point
context.lineTo x, y
else
skip = true
canvas.bind "touchstart", (event) ->
touch = event.touches[0]
[x, y] = [touch.pageX - xOffset, touch.pageY - yOffset]
event.preventDefault()
canvas.bind "touchmove", (event) ->
touch = event.touches[0]
points.push [touch.pageX - xOffset, touch.pageY - yOffset]
canvas.bind "touchend", (event) ->
points.push [x, y], [x, y], null
setInterval ->
return unless points.length
start = new Date
context.beginPath()
draw points.shift() while points.length and new Date - start < 10
context.stroke()
, 30
### Shade ###
lightswitch.bind "click", (event) ->
if body.hasClass "shade"
body.removeClass "shade"
else
body.addClass "shade"
event.preventDefault()
### Share ###
openShareWindow = ->
share.addClass "active"
setTimeout ->
output.attr "src", canvas.get(0).toDataURL()
output.get(0).onload = ->
body.addClass "share"
, 10
closeShareWindow = ->
share.removeClass "active"
body.removeClass "share"
output.get(0).onload = null
output.attr "src", "/images/chalk-sprites.png"
share.bind "touchstart", ->
openShareWindow()
close.bind "click", (event) ->
closeShareWindow()
event.preventDefault()
output.bind "touchcancel", ->
setTimeout closeShareWindow, 50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment