Question

class MakeCanvas
    constructor : (elemId,width,height,@slideTimeThrottled) ->      
        @ctx = document.getElementById(elemId).getContext '2d'  
        @ctx.canvas.width   = width 
        @ctx.canvas.height  = height
        @ctx.canvas.style.marginTop = (((height / 2) * -1)+(43 / 2))+'px'

        @aniInterval = null 
        clearInterval @aniInterval  
        @frameNum    = 0

    drawFrame : ->
        console.log 'drawFrame not overwritten'

    animate : ->
        clearInterval @aniInterval
        @frameNum    = 0
        @aniInterval = setInterval (=>
            @ctx.clearRect 0, 0, @ctx.canvas.width, @ctx.canvas.height
            @drawFrame()
            @frameNum++
            @stop() if @frameNum > @slideTimeThrottled
        ), frameRate
    stop    : ->
        clearInterval @aniInterval

I’m using a coffeescript class to try and automate some basic functions of the canvas. The above code works just fine for the most part, but I would really like to start using requestanimationframe instead of setInterval.

I would like to use the polyfill posted here: https://gist.github.com/1579671

Unfortunately I am just not getting it. How could this class be re-written to function the same and use requestanimationframe instead?

Answer 1

# requestAnimationFrame() shim by Paul Irish
# http://paulirish.com/2011/requestanimationframe-for-smart-animating/

window.requestAnimFrame = (->
  window.requestAnimationFrame or window.webkitRequestAnimationFrame or                         window.mozRequestAnimationFrame or window.oRequestAnimationFrame or window.msRequestAnimationFrame or (callback, element) ->
    window.setTimeout callback, 1000 / 60
)()

# Behaves the same as setInterval except uses requestAnimationFrame() where possible for better performance
# @param {function} fn The callback function
# @param {int} delay The delay in milliseconds

window.requestInterval = (fn, delay) ->

  return window.setInterval(fn, delay) if not window.requestAnimationFrame and not         window.webkitRequestAnimationFrame and not (window.mozRequestAnimationFrame and     window.mozCancelRequestAnimationFrame) and not window.oRequestAnimationFrame and not     window.msRequestAnimationFrame

  start = new Date().getTime()
  handle = {}

  theLoop = ->
    current = new Date().getTime()
    delta = current - start
    if delta >= delay
      fn.call()
      start = new Date().getTime()
    handle.value = requestAnimFrame(theLoop)  

  handle.value = requestAnimFrame(theLoop)
  return handle
# Behaves the same as clearInterval except uses cancelRequestAnimationFrame() where possible for better performance
# @param {int|object} fn The callback function

window.clearRequestInterval = (handle) ->
  (if window.cancelAnimationFrame then window.cancelAnimationFrame(handle.value) else (if     window.webkitCancelAnimationFrame then window.webkitCancelAnimationFrame(handle.value) else     (if window.webkitCancelRequestAnimationFrame then     window.webkitCancelRequestAnimationFrame(handle.value) else (if     window.mozCancelRequestAnimationFrame then window.mozCancelRequestAnimationFrame(handle.value)     else (if window.oCancelRequestAnimationFrame then     window.oCancelRequestAnimationFrame(handle.value) else (if window.msCancelRequestAnimationFrame then window.msCancelRequestAnimationFrame(handle.value)         else clearInterval(handle)))))))