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

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!


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}