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"