30 Nov

Canvas Development Part 2

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

So let’s jump into some code for a basic example. Below we define the shadow properties, then create an orange rectangle.

This gives us:

See the Pen drawing a orange rectangle with shadow on Canvas by code peach (@codepeach) on CodePen.0

Tip:  If you want your shadows going in the other direction (ie left and/or above the object), simply use negative values for the shadowOffsetX / shadowOffsetY values.

Text Shadows in Canvas

Casting shadows from text is done exactly the same way as above, using the same 4 properties. Here’s an example showing how, and this time we will cast the shadow with negative offset values to set the shadow to go to the left and upwards.

This gives us:

See the Pen text with shadow on canvas example by code peach (@codepeach) on CodePen.0

Canvas Patterns

Patterns in Canvas are a graphic object (ie: an image, video, or another canvas) which can be used to fill or draw a shape, optionally repeating horizonally and/or vertically, or without repeat.

To get started we call createPattern(image, repeat) function on the context object, which will return the new pattern object.

The image we pass to createPattern can be loaded by creating a new image() object, or we can use an image already within the page by using getElementById(id).

The repeat parameter we pass to createPattern can be one of the following values ;

  • “repeat” – repeats image in both directions
  • “repeat-x” – repeats horizontally only
  • “repeat-y” – repeats vertically only
  • “no-repeat”

Once we have the pattern object created, we can use it to set a fillStyle.

The code below is an example of creating a canvas from a newly created image() object:

This gives us:

See the Pen pattern on canvas example by code peach (@codepeach) on CodePen.0

We could have used an image already on the page rather than creating a new image object & onload method, like so:

Conclusion

We hope you’ve found part 2 of our HTML5 Canvas Tutorial Series useful! Please leave any feedback or questions in the comments below, and why not show us some love by sharing this page on the social networks.

If you want a refresher on getting started with developing  with HTML5 Canvas, jump over to Part 1 of this series.

Stay tuned for the rest of the series soon as we’ll be covering:

  • Animating objects
  • Rotation and scaling
  • Transforming objects
  • Loading Images into the canvas
  • Pixel level manipulation
  • Canvas Mouse and Touch Events
  • External libraries for canvas development.

 

Feature photo “shadow dancer” by: Magdalena Roeseler.

Related Posts