- Feature #10: Path-Based Graphics and the Nonzero Winding Rule
- Feature #9: Hit Detection
- Feature #8: canvas Is an HTML Element
- Feature #7: Temporary Drawing
- Feature #6: Offscreen Canvases
- Feature #5: Transforming the Coordinate System
- Feature #4: Image Manipulation
- Feature #3: Drawing Images and More with drawImage()
- Feature #2: The Clipping Region
- Feature #1: New Functionality in the 2D API
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Feature #1: New Functionality in the 2D API
In March 2012, the WHATWG updated the Canvas specification to include significant new functionality, and the World Wide Web Consortium (W3C) followed suit. (Read the Editor's draft of the specification for details.) That new functionality collectively comprises the number 1 spot in this top 10 countdown. Major additions to the 2D API include the following:
- Hit regions
- Path definition with SVG path data
- Much-improved text metrics
- Image smoothing
- Path and drawing style objects
- Dashed lines and ellipses
Hit regions are ranked number 9 in this countdown of the top 10 Canvas features, but that only takes into account the isPointInPath() method, which tells you whether a particular point lies within a given path. If you have many hit regions in a single canvas, which is typically the case for applications such as games, you have to manage those hit regions yourself with isPointInPath(). The latest version of the 2D API takes that inefficient drudgery off your hands by letting you register regions, defined by a path, within your application. You can also specify different cursors for different regions, among other things.
You can also specify paths with SVG path data, which is not only a great convenience for Canvas developers, but also makes it much easier to port code that uses SVG to Canvas.
Historically, the 2D API could measure the width of text in a canvas, but not the height. Even the width didn't inspire much confidence, because it came with the caveat that the actual width of the bounding box for the text could differ from the width the API reported. All of those glaring textual deficiencies have been addressed in the updated specification, which now includes many metrics for text height, as well as the exact bounding box for any given string.
Retro pixelated games are quite popular nowadays, but they were difficult to implement with HTML5 Canvas, because the 2D context automatically smoothes images, destroying the pixelated effect. Largely for that single use case, the updated version of the Canvas specification lets you turn image smoothing on and off.
Finally, the updated Canvas specification includes several conveniences such as being able to create path and drawing style objects, and the ability to draw ellipses and dashed lines.