HTML5 Canvas in Five Minutes
Join the DZone community and get the full member experience.Join For Free
I just ran across this well-formatted, clearly written 'five-minute' HTML5 Canvas tutorial by John Papa.
For Canvas beginners, this is the best quick tutorial I've seen.
John provides a quickstart table of core canvas functions, then divides the actual Canvas creation process into three simple steps:
- Grab a Canvas and Its Context
- Define Your Canvas Settings
- Draw on the Canvas
Nothing is uselessly explained, as for example:
context.lineWidth = lineWidth; context.lineCap = "square"; context.lineJoin = "round";
The tutorial outputs a Canvas drawing of his name, which is kind of neat -- and the letters in 'John' do include the most basic kinds of paths.
Useful for developers, but probably better for designers (as it maintains a physical-drawing metaphor throughout).
If you're interested, check out the full tutorial here.
Opinions expressed by DZone contributors are their own.