Learn more with dummies

Enter your email to join our mailing list for FREE content right to your inbox. Easy!

HTML5 Canvas Context Attributes

By Don Cowan

Part of HTML5 Canvas For Dummies Cheat Sheet

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"