Text can be added to a Canvas element. Text within a Canvas can’t be controlled a huge amount, but we’ll discover here what can be achieved.
As well as drawing shapes on a Canvas, shapes can also be erased. For the examples in this post, I have initially laid down a filled background rectangle, and erased shapes out of it to demonstrate.
To create more complex shapes than circles and rectangles, we need to learn how to create paths, so we can have free reign and draw whatever we like. This post will concentrate on drawing paths and shapes with straight lines, and I shall cover curved paths in a future post.
I thought it was time to look into HTML5 Canvas as it was a big grey area in my knowledge and therefore something I should investigate, so started out slow with exploring how to draw shapes. In this post, I’ll just cover drawing simple shapes, and move onto paths and curves in future posts.
Prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.
In CSS3, we can add shadows to objects without using images. We do need to add prefixes for Mozilla and Webkit browsers, so in effect adding the same styles 3 times (unless we use Prefix free).