HTML5 Canvas 5 Gets New Features
Written by David Conrad   
Tuesday, 03 April 2012

The 2D work horse of the web canvas is on its way to version 5 with some interesting new features. What is surprising is how sophisticated the features are  - suggesting that the Canvas element is now fairly mature.

Most of the additions fit into the "handy" but not essential category. For example there is now an Ellipse drawing command. You could create an ellipse before but not directly and it involved a lot of strange geometry with Bezier curves.

html5logo

 

Another nice addition is the path primitive. You can now create a path object, define a path and then render the path to the Canvas. This means you can maintain multiple paths rather than just one.  You can also now use the SVG mini-language for a path e.g. "M 100,100 H 50 V 50" and so on. You can also apply SVG transformation to paths defined in this way.

Paths can also be rendered as dashed lines and you can fit text to a path which is the sort of facility you expect to find in an up market drawing package.

A major addition is the ability to define "hit regions". This allows you to specify an arbitrary area to respond to user events. In other words you can define hot-spots within a graphic. All you have to do is define a path and add a HitRegion before closing it. For example:

context.beginPath();
context.rect(10,10,100,100);
context.fill();
context.addHitRegion(
{ id: 'The First Button' });

This creates a rectangular area that will respond to a user clicking on it by generating an  event. Yes it acts like a button within your graphic. In future you wont have to create similar functionality by arranging click-able elements in front of the Canvas element. You can discover which area has been clicked by examining the event arguments passed to the Canvas event handler. You can also specify automatic cursor changes if the user moves the cursor over the hit region so that they know that it is a click-able area.

There are some other minor additions -more metrics in MeasureText, the ability to transform a pattern, a reset for the clip region and transform.

Let's hope that we see the new Canvas features rolled out in browsers as soon as possible.

 

html5logo

More Information

canvas v5 API additions

WHATWG Weekly: Path objects for canvas and creating paths through SVG syntax

 

Related Articles

Chrome 18 Now With 2D GPU Graphics

Getting Started with Box2D in JavaScript

SVG, JavaScript and the DOM

Getting started with SVG for HTML5

A Programmer's Guide to Canvas

 

raspberry pi books

 

Comments




or email your comment to: comments@i-programmer.info

 

To be informed about new articles on I Programmer, subscribe to the RSS feed, follow us on Google+, Twitter, Linkedin or Facebook or sign up for our weekly newsletter.

 

Banner


Quantum Company Wins Digital Startup Contest
03/03/2024

Quantum specialists Qilimanjaro is the winner of this year's Four Years From Now competition. The award was made at this year's Mobile World Congress (MWC) in Barcelona.



Android Studio Iguana With Crash Reports
05/03/2024

Google has announced that the latest version of Android Studio, Iguana, is now stable. It has version control system support in App Quality Insights and new built-in support for creating baseline prof [ ... ]


More News

Last Updated ( Tuesday, 03 April 2012 )