HTML5 canvas: An Introduction
HTML5 canvas is one of the vital tools in a grahic developer working with HTML5. It helps delivering high interactivity levels and multimedia to the end user in almost unlimited variations and combinations.
What is HTML5 canvas?
What makes HTML5 canvas an amazing API?
Here are some reasons which makes HTML5 canvas so Great:
Interactivity; It is fully interactive. It doesn’t wait for user’s action and can respond by listening for keyboard or touch events. It doesn’t restrict a developer to only static graphics and images.
Animation; It can animate all the objects drawn on the canvas. This can create all levels of animations, from complex forward and inverse kinematics to simple bouncing balls.
Flexibility; It helps developer to create about anything. It can show lines, text, images, shapes, etc and can animate anything. It makes adding video and audio to a canvas possible.
Browser/Platform Support; All major browsers support HTML5 Canvas. It can be accessed on various devices ranging from desktops, tablets to smart phones.
What applications can you create with HTML5 canvas?
No wonder HTML5 Canvas is great and now let’s see what canvas do for developers.
Gaming; The HTML5 Canvas feature can produce all sorts of 2D and 3D games.
Advertising; It is a perfect substitution for flash-based banners and ads. It includes all the required features for attracting buyer’s attention.
Education and Training. HTML5 Canvas helps us to produce powerful and attractive learning experiences, combining texts, audio, videos and images.
Art and Decoration; It can draw all types of artistic and decorative graphics. It has powerful features and wide variety of colors, patterns, shadows and gradients.
You should have a code editor and a browser with HTML5 canvas support. We have used Google Chrome and Sublime Text, but you can use any of your choice.
Our HTML to start will look like this:
<canvas id="exampleCanvas" width="500" height="300">
<!-- OPTION 1: leave a message here if browser doesn't support canvas -->
<p>Your browser doesn’t currently support HTML5 Canvas.
Please check caniuse.com/#feat=canvas for information on
browser support for canvas.</p>
<!-- OPTION 2: put fallback content (text, image, Flash, etc.)
if the browser doesn't support canvas -->
var canvas = document.getElementById('exampleCanvas'),
context = canvas.getContext('2d');
// code examples will continue here...
By default, the browser will create the canvas elements with a height of 150 pixels and a width of 300 pixels, even if these aren’t described in the HTML. You can change the size anytime by specifying the width and height, as we’ve done in the HTML.
Basic canvas examples
We use four canvas API methods to draw a line:
- beginPath() - It instructs your device’s browser to get prepare to draw a new path.
- moveTo(x, y) - We use it to set the line’s starting point.
- lineTo(x, y) - To set the ending point and draws the line by connecting the two points
- stroke() - To make the line visible we use this method
To draw a rectangle, we use two methods:
- fillRect(x, y, width, height) - This method is used to set the coordinates and the dimension
- fillStyle - It is used to set the fill color.
To draw text on the canvas, use fillText(string, x, y) method along with the font property to set the size, and style of the text.
Example of canvas in HTML5: