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

Cheat Sheet

HTML5 Canvas For Dummies

From HTML5 Canvas For Dummies by Don Cowan

The Canvas feature of HTML5 is a significant addition to web-based graphics capabilities. It supports the use of JavaScript code to draw and animate lines, curves, complex objects, images, text, and audio/video on designated areas of web pages. This Cheat Sheet provides a handy list of the JavaScript functions and attributes used to create Canvas applications. It’s organized by functional group for quick reference during JavaScript coding.

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)
blog comments powered by Disqus
Advertisement
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win an iPad Mini. Enter to win now!