In this post, I’m going to look at linear and radial gradients and the methods required to apply them as a fill to various different shapes within a Canvas. Gradients are very versatile; they can include multiple colour stops and be positioned within a shape.
Year: 2012
HTML5 Canvas: Styles
Here I’m going to experiment with adding different styles onto shapes and lines within a Canvas – looking at colour fills, opacity of fills, outlines/borders and linejoins and linecaps for lines and outlines.
HTML5 Canvas: Text
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.