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.
HTML5 Canvas: Erasing shapes
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.
HTML5 Canvas: Bezier curves
Following on from my post about straight line paths, now would be a good time to look into bezier curves. With these, we can create an even larger array of shapes.
HTML5 Canvas: Paths
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.
HTML5 Canvas: Intro and drawing simple shapes
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.
Continue reading HTML5 Canvas: Intro and drawing simple shapes
CSS3 text-shadow
Following on from my post on CSS3 box-shadow, we can also add shadows to text which will follow the shapes of the characters, not just outline the text element.
Prefix-free
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.
CSS3 box-shadow
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).