Defining a Canvas Area

We will start our tutorial using a pre-built template HTML file. The first thing we will want to do is figure out where to place our HTML5 canvas information followed by filling the canvas background color so we can find it using the canvas JavaScript API.

The HTML5 Canvas API is not available on all browsers but limited to browsers that have adopted HTML5. In this title we don't cover the background story of HTML5 and the supported API's. We will see in a very quick and interactive tutorial the steps involved with creating a new Canvas element.

The first step of any canvas element is creating the CANVAS tag in HTML. After creating the HTML element we are ready to start interacting with it in JavaScript.

There are a few mandatory steps in any JavaScript canvas tutorial before we can start really to engage with our canvas drawing capabilities. The first one is actually getting our canvas element. We can use any of the known ways of fetching HTML via JavaScript. One popular way is getting our element by using its id by calling the getElementByID method of our document.

Once we got our Canvas HTML element in JavaScript we are almost ready to start drawing into it. Before we start drawing we need decide what will be the drawing API that we will use. We will always pick a 2D drawing option. The way to trigger the 2d drawing API is by creating a context for it by triggering the getContext method of the canvas element and requesting from it the "2d" API.

At this stage in our HTML5 canvas tutorial we can start drawing and interacting with the 2D canvas API. The last step we do in this task is to draw a background to make our canvas visible in the HTML document.

Initially when the canvas html5 element is created it is empty with no content and no boarder (it is transparent as well).

HTML5 canvas tutorial

The canvas element came to replace other drawing tools that are used on the web such as silver light, java applets and Flash. The Canvas enables us to draw into HTML using JavaScript. Currently there are two supported APIS. One for 2 denotational drawing while the other is for three dimensional drawing.

The HTML JavaScript Canvas API enables us to draw dynamically onto the browser within the canvas drawing area without the use of external 3rd party tools. The HTML5 part of creating the canvas is just an empty box but the magic happens when you connect the JavaScript API that enables us to draw many shapes and forms. Direct drawing of lines, squares, circles, arcs curves are built in (with it the capability to draw any 2 dimensional drawing. The JavaScript Canvas API enables us to do pixel manipulation as well but that is out of scope of this project for more about that check some of our other HTML5 titles.

Not all Browsers support the canvas API. Although the list is growing and changing all modern browsers support in some level the API.

Why learn tutorials with us?

There are many HTML5 canvas tutorials out in the market some are free while others are paid. We go beyond shallow scans of technology. Our mission is consistently helping developers and new to development individuals to expand there skills. While others will create isolated titles on Canvas or other HTML5 topics our approach is integrated. The more you learn with us the more you will pick up on many other technologies based on need instead of basing it off a technology.

The best way to learn is through repetition and change. Sounds like conflicting ideas right? Its true you don't want to do the same thing over and over as you just learn to be a "parrot" and you will only master the skills of copy paste. While change can be hard and challenging without the right level of repetition its very hard to absorb new information. While other titles will focus on one topic our titles focus on an integrated learning experience that has the right level of repetition and new content.

Beyond our strategic content build up that will help your growth we focus on expanding your understanding of technologies that surround the ones you are working on in a very in depth strategy that works. The best way to find out is to give us a go.

Other interesting titles:

AS3 Drawing API

if you have a background in programing in flash you will find the Canvas API very similar to other drawing apis such as the flash Drawing API.

Our AS3 Drawing API course will walk you through all the basic things you need to know about how to get rolling with the Flash graphics API. starting from the basics of creating basic shapes and all the way through dynamic animations such as the one in the preview page of this course.

In this title you will learn how to draw lines using the AS3 graphics API, draw a full shape and fill it with color. using beginFill and endFill used in AS3 while in JavaSCript API we will learn the names and interactions within our current Canvas video. In many ways we will learn in our AS3 title many of the same things we are learning in this title so if you are one of our members I strongly encourage you to check out this title as well - as its more in depth.

HTML5 101

If you are into the future and into JavaScript then you are into HTML5. We got a great title for you that covers all of the major updates from HTML4 to HTML5. We called this title HTML5 101 and is designed for people that have a basic understanding and worked with HTML before but have no or a low amount of experience with HTML5.

Ever have a dream that you where an HTML5 Hero? That's odd most people do... well let the dreams rain on you with this supper cool new course that will drive in and make your new dream come true. The topics in this course range from the technical changes to HTML into the depths of working in JavaScript in an html5 world. It's time to start to learn html5 before everything things your an old school developer. Did someone say html5 video?. In this title we cover an HTML5 canvas tutorial that is more in depth then the one in this title.