What’s New
- CSS Masking
- Easy High DPI Images
- Profiling Mobile HTML5 Apps With Chrome DevTools
- Case-study: JAM with Chrome - How we made the UI rock
- Splash Vector Graphics on your Responsive Site
- Movi Kanti Revo - Part 1: Building the 3D World
- High DPI Canvas
- High DPI Images for Variable Pixel Densities
- Jumping the Hurdles with the Gamepad API
- Making of the World Wonders 3D Globe
The Future is Now!
Of course, none of these new technologies would be useful if they weren’t capable of running fast. Thankfully, JavaScript engines have become fast enough to run 3D games and manipulate video in realtime. Hardware accelerated compositing is also being implemented in many browsers, meaning that even CSS transitions and transforms will be butter-smooth.
Developers are taking advantage of these features: a flood of HTML graphics demos have been showing up on the web, ranging from implementations of old 2D graphics algorithms, to brand new techniques created specifically for the modern web.
Browser Support
“Graphics” is such a wide topic that there are several specifications being worked on. A comprehensive graphics demo may use several of the following:
- PNG Alpha Transparency
- Data URLs
- CSS3 Colors
- SVG (basic support)
- Canvas (basic support)
- Video element
- CSS Transforms
- Text API for Canvas
- SVG in CSS Backgrounds
- SVG effects for HTML elements
- SVG SMIL animation
- SVG Fonts
- SVG filters
- CSS3 Animation
- Inline SVG in HTML5
- 3D Canvas graphics / WebGL
- CSS 3D Transforms
Click each specification to see its support status on caniuse.com. Chrome-specific details can be found on the Chrome Platform Status.
Demos
- Chrome Experiments Various WebGL / canvas demos which take advantage of HW accel
- TinkerCad WebGL solid modeling CAD
- Animated CSS3 cube using 3D transforms 3D effects without WebGL
- Hakim.se / Experiments Nicely polished canvas experiments
- 8-Bit color cycling with HTML5 Old-school games effect
- IE9 Graphics demos Various canvas demos which take advantage of HW accel
- Blowing up HTML5 video and mapping it into 3D space Nice integration between video and canvas
In the Wild
Resources
- svgweb Support SVG on all browsers
- Adobe Illustrator HTML5 pack SVG, CSS, Canvas support for Illustrator
- Raphaël Animation library wrapping SVG
- cakejs JavaScript scenegraph library for the canvas element
- Processing.js Port of Processing animation scripting language to JavaScript - uses canvas
- three.js Lightweight 3D engine, uses canvas, SVG, WebGL
- GPU Accelerated Compositing in Chrome Background and details on the implementation of hardware accelerated compositing in Chrome