The basics of HTML5 Canvas: Part 1

HTML 5's Canvas has been out now for quite a while but for some it's a completly new feature, a new skill to master. On a recent project of mine I've had the chance to delve into what you can actualy do with it and alothugh I'm still learning I've enjoyed finding out what it's capable of.

What is the Canvas Element :

"The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph."

Canvas also works on a co-ordinate system, where each pixel on your screen has a co-ordinate linked to it, starting at (0,0) in the top left corner moving to your right increases the X value and moving to the bottom of your screen increases the Y value, this is an major part of positioning your items in canvas and you have to get it right if you want your items in the correct place.

Why use Canvas? :

Why use Canvas is a good question, looking around there are many people who say to use SVG as that works on vector shapes where as Canvas works on usng the Pixels on screen. The question is not whether you should choose one or the other it's more is it something that you would find hard to do with SVG's then Canvas might be the option and vise versa. Here are a few points although some of these points to outline Canvas.

• Canvas is a web standard, so there is no need for any other resource library or external script to be running.
• You can can create anything ranging from Static Images to Animations and even creating Games using Canvas.
• Canvas is a fully interactive element and can change or respond to different types of inputs, making it ideal for creating games or interactive web-apps
• ​Canvas is widley supported of modern browsers and on all devices the only issue may be users of IE 8 and lower. Check out the Browser Support

Getting Started :

Canvas is really simple to get started, all thats required is the Canvas tag "<canvas id="basicCanvas"></canvas>' and some simple JS to impliment. Instead of writing out all the code just check the codepen example below to see how I've created the elements using canvas. This example below it will show you how to create a basic canvas that spans the entire height and width of the window. I've added comments in the code to help you out.

See the Pen xweMjz by Adam Ascroft (@adam-ascroft) on CodePen.

Creating simple shapes :

Here are some basic shapes that make the foundation of creating items in canvas. Creating

See the Pen rObRmq by Adam Ascroft (@adam-ascroft) on CodePen.

More Uses:

Adding a loop into javascript will recreate the element multiple times, using this combined with randomly generated numbers you can re-reate multiple items of various sizes positioned randomly within the page.

See the Pen LpvaGo by Adam Ascroft (@adam-ascroft) on CodePen.