X
Home & Office

Google produces first HTML 5 canvas-only doodle

Google has unveiled its first homepage doodle to be built using only HTML 5 canvas, an element of the burgeoning web standard that allows developers to render dynamic bitmap images and 2D shapes.The company frequently replaces its standard logo on search pages with special versions to commemorate special occasions.
Written by David Meyer, Contributor

Google has unveiled its first homepage doodle to be built using only HTML 5 canvas, an element of the burgeoning web standard that allows developers to render dynamic bitmap images and 2D shapes.

The company frequently replaces its standard logo on search pages with special versions to commemorate special occasions. Friday's logo is an interactive mobile — of the hanging-sculpture rather than cellular-handset kind — displayed in honour of artist Alexander Calder's birthday.

google-doodle-canvas.jpg

The mobile, a variation on Calder's 1960 work 'The Star', resembles an abstract fish, with freely-moving sections linked only by single strands of wire. The web-surfer can use their cursor to move the mobile as a breeze would, and the sculpture casts a dynamic shadow below the search bar.

Google software engineer Jered Wierzbicki came up with the idea after seeing Calder creations in Chicago's Museum of Contemporary Art, he said in a blog post on Thursday.

"This is Google's first doodle made entirely using HTML 5 canvas, so you need to use a modern browser to interact with it," Wierzbicki wrote. "It runs a physics simulation on the mobile’s geometry, and then does realtime 3D rendering with vector graphics. Only recently have browsers advanced to the point where this is possible."

Indeed, a quick test of the doodle showed to it to work as an interactive object in Chrome and Firefox 5, but Internet Explorer — both IE9 and the IE10 platform preview — displayed it only as an immovable 2D image.

"I like to think Calder would have appreciated today's doodle, since we're setting up shapes and abstractions and letting them act on their own," Wierzbicki said. "Hint: try it out on a laptop with an accelerometer!"

Editorial standards