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


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

08 Jul

HTML5 Templates and References

HTML5 logo

Here we list some essential HTML 5 templates, references and resources which we think you’ll find useful whether you’re a novice web developer starting out or seasoned guru.

HTML Element Reference List

A thorough, alphabetically sorted list of element tags in HTML (new and old versions  from HTML2.0 to HTML5.1, and XHTML) which shows each element’s HTML version validity along with links to the element’s specifications on w3c.

Visit: http://w3c.github.io/elements-of-html/ Read article

Related Posts

03 Jul

Google Web Starter Kit


Google have recently released their Web Starter Kit – very useful website boilerkit templates for web developers, which are optimized for speed and efficiency, as well as using responsive design for multi-devices. The templates aim to provide the highest possible Pagespeed Insights score, an important factor in SEO, out of the box.
Read article

Related Posts