New HTML5 canvas features

The details on this page are based on an evolving specification and subject to change. Example charts will follow when browsers have support.

As of March 2012 several new features to the HTML5 canvas API were announced. These features will make using the HTML5 canvas tag much easier - particularly reading mouse events, and will also make for more concise code. In turn this will mean more efficient code, smaller libraries and faster downloads.

Hit regions

January 2013 Update: There's a more detailed article about hit regions here.

Hit regions are possibly the most exciting of all the features. They provide a way for you to define an area of your canvas (and add an id: property to it) and then you can check the event.region property (on an event object provided by a canvas tag event) to see if it matches that id:. No more working out whether the mouse coordinates are within a particular area - which can range from being a chore to being entirely unpractical. It will mean that significant amounts of click-detection code could be eliminated from libraries that use canvas which means faster, smaller downloads and more efficient and readable code. Also, it will mean that click detection becomes much easier for complex shapes.

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

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

    canvas.onclick = function (event)
    {
        if (event.region) {
            alert('You clicked ' + event.region);
        }
    }
<script>
[No canvas support]

This odd shape would be non-trivial to test for clicks - not impossible as you can see - but certainly not straight-forward. With hit testing and the new Path() object described below, this becomes much easier. Currently you would have to keep the coordinates to hand and then recreate the path and use isPointinPath(). With the new Path objects you could just keep the object around. With hit regions, you wouldn't have to even do that - just define a hit region for a particular path and it's done for you.


The code for this example using the .isPointInPath() function is this:

<script>
    ca = document.getElementById("cvs");
    co = ca.getContext('2d');
    
    co.beginPath();
        co.fillStyle = 'red';
        co.moveTo(50,50);
        co.quadraticCurveTo(150,25,200,150);
        co.lineTo(100,245);
        co.lineTo(50,125);
        co.lineTo(100,50);
    co.closePath();
    co.stroke();
    co.fill();
    
    ca.onmousemove = function (e)
    {
        var ca = e.target;
        var co = ca.getContext('2d');
        var coords = RGraph.getMouseXY(e);
        
        document.getElementById("out").value = 'Is point in path: ' + (co.isPointInPath(coords[0], coords[1]) ? 'YES' : 'NO');
    }
</script>

Automatic cursor control

You can also associate a cursor type to a hit region meaning that when the mouse is moved into that region the mouse cursor is automatically changed.

<script>
    context.addHitRegion({
        path: new Path('M 10 10 h 20 v 20 h -20 z'),
        cursor: 'url(fight.png)',
    });
    context.addHitRegion({
        path: new Path('M 50 30 h 20 v 20 h -20 z'),
        cursor: 'url(quaff.png)',
    });
</script>

Path object

January 2013 Update: There's a more detailed article about path objects here.

The new Path object is really promising. It will bring a slight air of OO to <canvas> in that you can draw a path as usual - but unlike at present - you can then save it for later use. So you will be able to test for mouse clicks (with the .isPointInPath() method) or draw the path again with different colors to add a highlight. Some sample code:

<script>
    var myPath = new Path();
    myPath.rect(0, 0, 100, 100);
    context.fill(myPath);
    
    // At this point you can retain or throw away the myPath object
</script>

Dashed lines

RGraph currently has support for dashed lines with the RGraph.DashedLine() function, however the addition of native dashed lines will be faster and mean that curved dashed/dotted lines will be feasible.

Update January 2013: Dashed lines are now implemented in Google Chrome and there's a article about them here.

Ellipses

Similar to the context.arc() method, the context.ellipse() method adds an ellipse to the canvas. Indeed if the radiusX and radiusY arguments are equal and the rotation argument is zero then this performs exactly like the arc() method.

<script>
    context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
</script>
Update January 2013: Theres a more detailed article that is focused on ellipses here   and an interactive example here.

Text on a path

Previously supported by Firefox only, this allows you to add text to a path and that text will follow the path. This allows for text following a curved line or going around a circle (potentially animated too).

Support for SVG path syntax

The SVG path syntax is much less verbose. In addition, having paths laid out in a string allows you to easily pass them around. An example is:

<script>
    myPath = new Path('M 100,100 h 50 v 50 h 50');
    context.stroke(myPath);
</script>

Along with the new path object this allows for easier retention of the shapes you have drawn on the canvas and subsequent testing for click events. In the example the M translates to .moveTo() and the h is a horizontal line (hence only the X coordinate is given and it's drawn relative to the current position).

Other new features

Summary

When you look at each individual feature listed above then they look good, but when you take them all into account together they are no less than superb. When browsers have support for them they will make working with canvas much easier, mean that you have to write less code and increase the accessibility to users who need it. This page will be updated with examples of their use as and when the features become available.

References