HTML5 Canvas Tutorial
One of the most important instruments in a painterâ€™s toolkit is their canvas. It gives them the freedom to express all kinds of feelings, impressions, ideas, and so forth, in almost unlimited variations and combinations. And that freedom can be restricted only by two things â€” their skill level and their imagination.
The situation in the web development world is similar. With the ongoing progress of HTML5 and its powerful specifications, web developers have gained the ability to do things that were impossible in the past. Drawing graphics and creating animations directly in the browser is now completely possible thanks to a technology calledÂ HTML5 Canvas.
What is HTML5 Canvas?
The canvas element is an element defined in HTML code usingÂ
Whatâ€™s so Great About HTML5 Canvas?
Here are some reasons you might want to consider learning to use HTML5â€™s canvas feature:
- Interactivity.Â Canvas is fully interactive. It can respond to a userâ€™s actions by listening for keyboard, mouse, or touch events. So a developer is not restricted to only static graphics and images.
- Animation.Â Every object drawn on the canvas can be animated. This allows for all levels of animations to be created, from simple bouncing balls to complex forward and inverseÂ kinematics.
- Flexibility.Â Developers can create just about anything using canvas. It can display lines, shapes, text, images, etc. â€” with or without animation. Plus, adding video and/or audio to a canvas application is also possible.
- Browser/Platform Support.Â HTML5 Canvas is supported byÂ all major browsersÂ and can be accessed on a wide range of devices including desktops, tablets, and smart phones.
- Popularity.Â Canvas popularity is rapidly and steadily growing so there is no shortage of resources available.
- Itâ€™s a web standard.Â Unlike Flash and Silverlight, Canvas is open technology thatâ€™s part of HTML5. And although not all of its features are implemented in all browsers, developers can be certain canvas will be around indefinitely.
- Develop once, run everywhere.Â HTML5 Canvas offers great portability. Once created, Unlike Flash and Silverlight, a canvas application can run almost anywhere â€” from the largest computers to the smallest mobile devices.
- Free and accessible development tools.Â The basic tools for creating HTML5 canvas applications are just a browser and a good code editor. Plus, there are many great and free libraries and tools to help developers with advanced canvas development.
What Applications Can You Create with HTML5 Canvas?
OK, canvas is great. But what exactly can use it for? Letâ€™s see.
- Gaming.Â The HTML5 Canvasâ€™ feature set is an ideal candidate for producing all sorts of 2D and 3D games.
- Advertising.Â HTML5 Canvas is a great replacement for Flash-based banners and ads. It has all the needed features for attracting buyersâ€™ attention.
- Data Representation.Â HTML5 can collect data from global data sources and use it to generate visually appealing and interactive graphs and charts with the canvas element.
- Education and Training.Â HTML5 canvas can be used to produce effective and attractive learning experiences, combining text, images, videos, and audio.
- Art and Decoration.Â With a little bit of imagination and canvasâ€™s wide variety of colors, gradients, patterns, transparency, shadows, and clipping features, all kinds of artistic and decorative graphics can be drawn.
Now that we know why we should learn canvas, letâ€™s look at the basics of HTML5 Canvas and how to start using it.
Canvas Rendering Contexts
Every HTML5 canvas element must have aÂ context. The context defines what HTML5 Canvas API youâ€™ll be using. The 2d context is used for drawing 2D graphics and manipulating bitmap images. The 3d context is used for 3D graphics creation and manipulation. The latter is actually calledÂ WebGLÂ and itâ€™s based onÂ OpenGL ES.
HTML5 Canvas Element Size vs. Drawing Surface Size
Besides the canvas elementâ€™sÂ
heightÂ attributes, you can also use CSS to set the size of a canvas element. However, sizing a canvas element with CSS is not the same as setting the elementâ€™s
heightÂ attributes. This is because a canvas actually has two sizes: the size of the element itself and the size of the elementâ€™s drawing surface.
When you set the elementâ€™sÂ
heightÂ attributes, you set both the elementâ€™s size and the size of the elementâ€™s drawing surface; however, when you use CSS to size a canvas element, you set only the elementâ€™s size and not the drawing surface. When the canvas elementâ€™s size does not match the size of its drawing surface, the browser scales the drawing surface to fit the element.
Because of this, itâ€™s a good idea to use the canvas elementâ€™sÂ
heightÂ attributes to size the element, instead of using CSS.
Understanding the Canvas Coordinate System
In a 2D space, positions are referenced using X and Y coordinates. The X axis extends horizontally, and the Y axis extends vertically. The center has a positionÂ
x = 0Â andÂ
y = 0, that can also be expressed asÂ
(0, 0). This method of positioning objects, used in mathematics, is known as theÂ Cartesian coordinate system.
The Canvas coordinate system, however, places the origin at the upper-left corner of the canvas, with X coordinates increasing to the right and Y coordinates increasing toward the bottom of the canvas. So unlike a standard Cartesian coordinate space, the Canvas space doesnâ€™t have visible negative points. Using negative coordinates wonâ€™t cause your application to fail, but objects positioned using negative coordinate points wonâ€™t appear on the page.