30 Nov

Canvas Development Part 2

By: Magdalena Roeseler

In this second part of our HTML5 Canvas Development Tutorials, we’ll be looking at working with shadows and patterns  within a canvas.

If you’re completely new to the Canvas element, I highly suggest you check out the first part of this series: Canvas Development Part 1 which provides an introduction to the element as well as some basic operations.

Creating Shadows with Canvas

When defining shadows, we have the following 4 properties within the canvas context to work with:

shadowColor – defines the colour of the shadow, can be a named colour, hex value, rgb() value or rgba() value
shadowBlur – blur amount, 0 is no blur
shadowOffsetX – horizontal spacing in pixels between object and shadow
shadowOffsetY – vertical spacing in pixels between object and shadow

Read article

Related Posts

14 Sep

Canvas Development Part 1: The Basics

spaceinvader

The Canvas element is a HTML5 element which can be used to draw and display visual graphics on the fly using Javascript. It is becoming increasingly used in games and apps, as well as webpages and web applications.

In Part 1 of this Canvas Element Tutorial Series, we’ll explore the basics of canvas development – getting a canvas onto the page and simple drawing and manipulation of the canvas.


Getting Started: A Blank Canvas

The HTML5 Canvas element tag should be defined with an id (for targetting via our JS), and optionally with width and height attributes and classes.. such as:

Read article

Related Posts