(This article was originally published on my blog here ).
Before HTML5 was introduced into the world of web developers, things were lifeless, unsatisfying, and complicated to achieve. For instance, any developer who needed to create graphics and animations was forced to depend on tools like Flash plugin or Java plugin—something which was burdensome and head spinning.
Nikitka, who has more than seven years of web development experience and currently teaches people his skills, says that “the advent of the powerful HTML5 element called Canvas turned around things and empowered developers to complete actions that were previously difficult.”
What is HTML5 Canvas?
You can use the Canvas element to achieve various objectives on your web applications, including drawing graphs, creating HTML Canvas animations, developing games, or creating photos—all without depending on another external tool.
Amazingly, Canvas is available as an API, and it is supported by most modern browsers and platforms. Furthermore, it’s cross-platform compatible. As such you can create an application once, and deploy it anywhere—on PCs or mobile devices.
Let’s see a Canvas markup code
Here is a simple markup for the HTML5 Canvas element:
<canvas width="320" height="160" id="canvasExample"></canvas>
As you can see on the above code, the Canvas element allows two specific attributes: width and height. If you do not provide values for these two attributes, the Canvas will resort to its default values of 300 pixels for width and 150 pixels for height.
How to draw on a Canvas
To create graphics on a Canvas, you need to begin by targeting it using the Document Object Model (DOM).
And, an id attribute will assist you to identify the matching target location (in this HTML Canvas example, the id is “canvasExample”).
For example, to create a rectangle shape on the Canvas, you’ll need the following property and functions:
- fillStyle = “color”—it adds color to the shape; otherwise, it will have a default color of black
- fillRect(x,y,width,height)—it draws a filled rectangle
- strokeRect(x,y,width,height)—it gives the rectangle its outline
- clearRect(x,y,width,height)—it clears the specified rectangular section and makes it entirely transparent
For defining coordinates, the Canvas grid or coordinate system is used. In this system, the original dimensions are located on the upper-left corner of the Canvas region, at coordinate (0,0). *
As such, the X coordinate will be moving to the right whereas the Y coordinate will be moving downwards. The distance is in pixels.
Here is an image showing how the Canvas Grid system works:
Each of the above-mentioned functions for creating rectangles takes the following parameters for denoting the coordinates and dimensions:
- x gives the horizontal position from the upper-left corner to the right
- y gives the vertical position from the top-left corner to the bottom
- width gives the width of the rectangle
- height gives the height of the rectangle
Here is the output on a browser:
- The Canvas element is first identified through the DOM
- The context is defined
- The fillRect() function produces a rectangle of 150 by 250 pixels
- The clearRect() function then deletes a rectangle of 100 by 50 pixels from the center
- Lastly, strokeRect() function constructs a rectangle of 75 by 20 pixels within the cleared region
Canvas is great because it is completely open sourced, highly interactive, and very flexible. It’s what you need to add some life to your applications and accelerate their performance.
Therefore, you need to learn how it works and take your web development skills to the next level.
All the best.