Over a million developers have joined DZone.

HTML5 Canvas in Five Minutes

DZone's Guide to

HTML5 Canvas in Five Minutes

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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.

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}