HTML5 Canvas For Dummies Cheat Sheet - dummies
Cheat Sheet

HTML5 Canvas For Dummies Cheat Sheet

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.


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

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:


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().


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

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


rect(xPosition, yPosition, width, height)

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



moveTo(xStartPosition, yStartPosition)

bezierCurveTo(xControl1, yControl1, xControl2, yControl2, xEnd, yEnd)
quadraticCurveTo(xControl, yControl, xEnd, yEnd)


createLinearGradient(xPosition1, yPosition1, xPosition2, yPosition2)

createRadialGradient(xCircle1, yCircle1, radius1, xCircle2, yCircle2, radius2)
addColorStop(positionFromZeroToOne, color)


drawImage(image, xPosition, yPosition)

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

Lines and Paths


moveTo(xPosition, yPosition)
lineTo(xPosition, yPosition)
isPointInPath(xPosition, yPosition)

    Comment: Returns true if in current path




createPattern(image, “repeat”)

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


clearRect(xPosition, yPosition, width, height)

fillRect(xPosition, yPosition, width, height)
strokeRect(xPosition, yPosition, width, height)
rect(xPosition, yPosition, width, height)


fillText(string, xPosition, yPosition, maxWidth)

    Comment: maxWidth is optional.

strokeText(string, xPosition, yPosition, maxWidth)

    Comment: maxWidth is optional.


    Comment: Returns an object that contains the width in pixels



scale(scaleHorizontal, scaleVertical)
translate(xTranslation, yTranslation)
setTransform(scaleX, skewY, skewX, scaleY, translateX, translateY)