Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

HTML5 Canvas in Five Minutes

DZone's Guide to

HTML5 Canvas in Five Minutes

· Web Dev Zone
Free Resource

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.

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.

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}