Over the last year, a couple of new HTML Canvas 2D features were implemented in Firefox and other recent browsers, with the help of the Adobe Web platform team. Over on MDN, the documentation for Canvas 2D got a major update to reflect the current canvas standard and browser implementation status. Let’s have a look what is new and how you can use it to enhance your canvas graphics and gaming content.
new Path2D(); // empty path object new Path2D(path); // copy from another path new Path2D(d); // path from from SVG path data
The third version, which takes SVG path data to construct, is especially handy. You can now re-use your SVG paths to draw the same shapes directly on a canvas as well:
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
// create a circle var circle = new Path2D(); circle.arc(50, 50, 50, 0, 2 * Math.PI); // stroke the circle onto the context ctx ctx.stroke(circle);
To actually draw the path onto the canvas, several APIs of the context have been updated to take an optional
Starting with Firefox 32, experimental support for hit regions has been added. You need to switch the
canvas.hitregions.enabled preference to
true in order to test them. Hit regions provide a much easier way to detect if the mouse is in a particular area without relying on manually checking coordinates, which can be really difficult to check for complex shapes. The Hit Region API is pretty simple:
- Adds a hit region to the canvas.
- Removes the hit region with the specified
idfrom the canvas.
- Removes all hit regions from the canvas.
addHitRegion method, well, adds a hit region to a current path or a
Path2D path. The
MouseEvent interface got extended with a
region property, which you can use to check whether the mouse hit the region or not.
Check out the code example on MDN to see it in action (and be sure to enable flags/preferences in at least Firefox and Chrome).
Also in Firefox 32, the
drawFocusIfNeeded(element) property has been made available without a preference switch. This API allows you to draw focus rings on a canvas, if a provided fallback element inside the
<canvas></canvas> element gains focus. If the fallback element gets focused (for example when tabbing through the page that contains the canvas), the pixel representation / shape of that element on the canvas can draw a focus ring to indicate the current focus.
CSS/SVG filters exposed to Canvas
Although still behind a preference (
canvas.filters.enabled), and not yet in the latest canvas specification (but expected to be added), Firefox 35 gained support for filters on the canvas rendering context. The syntax is the same as the CSS filter property.
alphacontext attribute is now implemented (Firefox 30). An opaque canvas can speed things up!
- You can now add transformations to patterns (Firefox 33).
ctx.resetTransform()to reset transformations has been added (Firefox 36).
- More coming! The latest canvas specification contains some new APIs and their implementation in browsers is underway.
If you would like to read more about Canvas 2D graphics, check out the Canvas tutorial on MDN, which guides you through the Canvas APIs. A good bookmark is also the large
CanvasRenderingContext2D interface, which you will use often when working with Canvas.
About Florian Scholz
Florian is a Technical Writer working on MDN Web Docs where he dedicates his time to documenting and making Open Web technologies accessible to everyone. He lives in Bremen, Germany.