Online Test Banks
Score higher
See Online Test Banks
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

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

Part of the 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
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus

HTML5 Canvas For Dummies Cheat Sheet


Inside Sweepstakes

Win $500. Easy.