HTML5 Canvas For Dummies

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

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

Understanding the HTML5 Canvas Context

An HTML-defined web page can have multiple Canvas areas. Each Canvas has an associated context. The ID defined in the <canvas> tag is used in JavaScript code to identify a Canvas and its associated context. Contexts are referenced using dot syntax notation. Here is an example: contextName.save().

getElementById("canvasName")
getContext("2d")
save()
restore()

HTML5 Canvas Context Attributes

Each HTML5 Canvas context contains attributes that can be modified by JavaScript code. Note that attributes are assigned to Canvas contexts, not individual Canvas objects. Attributes for a context are referenced using dot syntax notation. Here is an example: contextName.fillStyle="red". The following attributes show default and other optional values:

fillStyle "black"  
 
font "10px sans-serif"
 
globalAlpha 1.0

    Comment: Values shown after attributes are defaults

globalCompositeOperation "source-over"

    Comment: Other compositions are

       "source-in", "source-out", "source-atop",
       "destination-over", "destination-in",
       "destination-out", "destination-atop", "lighter",
       "copy", "xor"
 
lineCap "butt"

    Comment: Other caps are "round" and "square".

lineJoin "miter"

    Comment: Other joins are "round" and "bevel".

lineWidth 1.0
 
miterLimit 10.0
 
shadowColor "transparent black"

    Comment: Other colors include wide variety

shadowBlur 0.0
 
shadowOffsetX 0.0
 
shadowOffsetY 0.0
 
strokeStyle "black"

    Comment: Other colors include wide variety

textAlign "start"

    Comment: Other alignments are

       "end", "left", "right", "center"
 
textBaseline "alphabetic"

    Comment: Other baselines are

       "top", "hanging", "middle", "ideographic", "bottom"

HTML5 Canvas Drawing Functions

JavaScript functions are used to manipulate pixels on HTML5 Canvas areas based on attribute settings and function parameters. Functions reference a context using dot syntax notation. Here's an example: contextName.beginPath().

Arcs

arc(xPosition, yPosition, radius, startAngle, endAngle, anticlockwise)

arcTo(xBeginning, yBeginning, xEnd, yEnd, radius)

Clipping

rect(xPosition, yPosition, width, height)

    Comment: Other shapes can also be used to set up a clipping area.

clip()

Curves

moveTo(xStartPosition, yStartPosition)

bezierCurveTo(xControl1, yControl1, xControl2, yControl2, xEnd, yEnd)

quadraticCurveTo(xControl, yControl, xEnd, yEnd)

Gradients

createLinearGradient(xPosition1, yPosition1, xPosition2, yPosition2)

createRadialGradient(xCircle1, yCircle1, radius1, xCircle2, yCircle2, radius2)

addColorStop(positionFromZeroToOne, color)

Images

drawImage(image, xPosition, yPosition)

drawImage(image, xPosition, yPosition, newWidth, newHeight)

drawImage(image, xCrop, yCrop, xPosition, yPosition, newWidth,  newHeight)

Lines and Paths

beginPath()

moveTo(xPosition, yPosition)

lineTo(xPosition, yPosition)

isPointInPath(xPosition, yPosition) 

    Comment: Returns true if in current path

stroke()

closePath()

Patterns

createPattern(image, “repeat”)

    Comment: Other patterns are “no-repeat”, “repeat-x”, “repeat-y”

Rectangles

clearRect(xPosition, yPosition, width, height)

fillRect(xPosition, yPosition, width, height)

strokeRect(xPosition, yPosition, width, height)

rect(xPosition, yPosition, width, height)

Text

fillText(string, xPosition, yPosition, maxWidth)

    Comment: maxWidth is optional.

strokeText(string, xPosition, yPosition, maxWidth)

    Comment: maxWidth is optional.

measureText(string)

    Comment: Returns an object that contains the width in pixels

Transforms

rotate(angle)

scale(scaleHorizontal, scaleVertical)

translate(xTranslation, yTranslation)

setTransform(scaleX, skewY, skewX, scaleY, translateX, translateY)