Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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
Add Comment
Please, Sign In to add comment