Advertisement
Online Test Banks
Score higher
See Online Test Banks
eLearning
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.

Animation

setInterval(callbackFunction, intervalInMilliseconds)

    Comment: Returns an ID

setTimeout(callbackFunction, intervalInMilliseconds)
 
window.requestAnimationFrame

    Comment: Browser-specific versions include

      webkitRequestAnimationFrame, mozRequestAnimationFrame,
      oRequestAnimationFrame, msRequestAnimationFrame

Audio/video

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

canPlayType(fileMimeType)

    Comment: Returns "maybe", "probably", or ""

load()
 
play()
 
pause()
 
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
blog comments powered by Disqus
Advertisement
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win an iPad Mini. Enter to win now!