An Elaborate Introduction to HTML5 Canvas

Advertisement

By -

An Elaborate Introduction to HTML5 Canvas

Quite similar to a painter’s canvas, even the world of web development offers you a plenthora of possibilities when it comes to developing high-end websites and applications. Specifically taslking about HTML5 development, we’re fortunate enough to have an easy access to the HTML5 Canvas which allows us to draw graphics in addition to creating animations directly within the browser. If you’re working in HTML5 or planning to do so lately, then getting familiar with the HTML5 Canvas is something you can’t afford to skip. So, here I bring to you a post which will familiarize you with everything related to HTML5 Canvas.

What exactly is HTML5 Canvas Element?

HTML5 Canvas element is an element that’s defined in HTML code using the height and width attributes. You can leverage HTML5 Canvas API for unleashing the real potential of HTML5 canvas element. Here, HTML5 Canvas API is the one that’s used by writing Javascript which has the caliber of accessing canvas area via a complete range of drawing functions. Therefore, this API makes room for dynamically generated graphics- a complete delight for designers.

Which all applications can be created using HTML5 Canvas?

Here’s a look at some of the mind-blowing apps that can be built using HTML5 Canvas:

  1. Advertising apps

As an impressive replacement for Flsh-based ads and banners, HTML5 Canvas serves as an excellent tool for developing ads that are able to grab the buyers’ attention at once.

  1. Gaming apps

If you’re looking out to produce different types of 2D and 3D games, HTML5 Canvas is for you.

  1. Education and Traning apps

Applications that need to render attractive learning experiences can be excellently created using HTML5 canvas. The reason being that the canvas allows you to combine text, videos, images and audio in an efficient format.

  1. Art and Decoration apps

Since HTML5 Canvas offers you the flexibility of creating all sorts of decorative graphics via use of a wide range of colors, patterns, gradients, transparency, clipping features etc.

A brief on Canvas Rendering Contexts

Well, before ahead, I’d like to make you familiar with the contexts aspect associated with HTML5 canvas element. Well, every HTML5 canvas element comprises of a context which defines the HTML5 Canvas API that will be used. For instance, the 2d context will be used for drawing 2D graphics and bitmap image manipulation. Likewise, 3d context will be used for drawing 3D graphics and their manipulation.

Getting Started with HTML5 Canvas Element

You need a code editor along with a HTML5 canvas-compatible browser. In this tutorial, I’ve used Sublime Text code editor and Google Chrome browsers.

The HTML structure would look like this:

In addition to above, the Javascript that should be included towards the bottom of the HTML Page is shown below:

By default, your browser will create canvas elements with a height of 150 pixels and a width of 300 pixels; although these specifications aren’t been defined within the HTML structure shown above. Howvere, you can easily change the size by specification different values for height and width, as has been done in the HTML above.

If you notice the above Javascript carefully, you’ll find the following:

  1. An id attribute has been assigned to the canvas. Aditionally, you are free to use CSS for adding a border to ensure that the canvas is visible via a thin frame.
  2. var getID = document.getElementById(“drawCanvas”);

This line of code creates a variable which caches the canvas element via its related ID.

  1. var drawCanvas = getID.getContext(“2d”);

This line of code creates a variable(context) that references the canvas’ 2D context using getContext() function. It is this variable which will be used for accessing all canvas drawing properties and functions.

  1. Between the opening and closing <canvas> tag, content that will be shown in the browser(only if the browser doesn’t support HTML5 Canvas) is being added.

A closer look at Canvas Coordinate System

As you must be familiar that in 2D space, positions are being referenced using X and Y coordinates. Here, X axis extends horizontally while the Y axis extends vertically. Also, the center has a position x=0 and y=0 which is better represented as (0,0). This technique of positioning objects in 2D space is called Cartesian corodinate system. Unlike this, in Canvas coordinate system, the origin at the upper-left corner of canvas is placed with X coordinates increasing to right and Y coordinates increasing towards the canvas bottom. To sum it up, the Canvas coordinate system doesn’t include any visible negative points, thereby preventing your app from failing.

A couple of examples showcasing the use of HTML5 Canvas

1. Drawing a Rectangle

You can use the fillRect(x, y, width, height) method for drawing a rectangle. With this method, you can set the set the x and y corordinates, dimensions and use the fillStyle property for setting the fill color.

Have a look at this:

Output:

drawing-rectangle-outputDo note that the created rectangle has been positioned near the top left corner of the screen.

2. Drawing Text

In order to draw text on canvas, all you need to do is simply use fillText(string, x, y) and the front property for setting the font, size and style of the text.

Have a look at this:

Output:

drawing-text-output

We’re done!

Conclusion

Now that you’ve gathered a pool of knowledge about HTML5 Canvas, here’s hoping you’d be all geared up for exploring the technology to the fullest.

Advertisement

Victoria Brinsley

Victoria Brinsley is a skilled Android app developer for Appsted Ltd – a reliable Android development company. You can explore more about the development tips and tricks by clearing your queries with her.

Comments are closed.