Online Test Banks
Score higher
See Online Test Banks
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

HTML5 Canvas Context Attributes

Part of the 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"
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus

HTML5 Canvas For Dummies Cheat Sheet


Inside Sweepstakes

Win $500. Easy.