HTML5 Canvas System Interaction: Animation, Audio/Video, and User Events - dummies

HTML5 Canvas System Interaction: Animation, Audio/Video, and User Events

By Don Cowan

Part of HTML5 Canvas For Dummies Cheat Sheet

HTML5 Canvas applications communicate with the host browser for animation callbacks, playing audio/video, and handling user events. This provides a two-way channel between JavaScript code and the browser. JavaScript code can be made aware of browser activities and instruct the browser on actions to take.


setInterval(callbackFunction, intervalInMilliseconds)

    Comment: Returns an ID

setTimeout(callbackFunction, intervalInMilliseconds)

    Comment: Browser-specific versions include

      webkitRequestAnimationFrame, mozRequestAnimationFrame,
      oRequestAnimationFrame, msRequestAnimationFrame


These functions reference an audio or video element using dot syntax notation. Here is an example:


    Comment: Returns maybe, probably, or

setAttribute("src", "fileSource")

User events

document.onkeydown = function(event) {var key = event.keyCode; . . .}

    Comment: Common browser window event types include

      onclick, ondblclick, onmousedown, onmousemove,
      onmouseover, onmouseout, onmouseup, onkeydown,  
      onkeypress, onkeyup, onctrlKey, onaltKey, onshiftKey
canvas.addEventListener("type", function, false)

    Comment: Common Canvas area event types include

      click, dblclick, focus, focusin, focusout, keydown,
      keypress, keyup, mousedown, mouseenter, mousemove, 
      mouseover, mouseup, mousewheel, pause, scroll,
      touchstart, touchmove, touchend, volumechange