Yahoo! Pipes and the HTML5 canvas tag

MAY 14, 2009
This post is part of the Who's @ Google I/O, a series of blog posts that give a closer look at developers who'll be speaking or demoing at Google I/O. Today's post is a guest post written by Paul Donnelly and Jonathan Trevor of the Yahoo! Pipes team.

Yahoo! Pipes is a free online service that lets you remix popular feed types (json, xml, rss, and atom) and create data mashups using a visual editor. You can use Pipes to run your own web projects, or publish and share your own web service without ever having to write a line of code. Pipes also allows you to create feeds from web sites that don't provide RSS/XML by extracting data straight from the HTML document. In this post, we'll talk about how the Pipes editor uses the HTML5 canvas tag extensively, challenges we faced using the canvas tag and a few solutions we came up with to address said challenges.

Pipes is widely known for its visual editor that allows you to drag pre-configured modules onto its canvas and wire them together:

We use the canvas tag to create the fluid, draggable wiring to connect modules. The thumbnails of Pipes on the Browse and My Pipes sections aren't jpegs - we use canvas to "draw" them dynamically from the Pipe definition.

Since the iPhone's web browser supports the canvas tag, we were able to use the same code to generate the thumbnails for our iPhone version.

The Pipes editor is where all the visual programming is done. By dragging modules to the workspace, you can set up a visual workflow of what you want processed. To complete the flow, you need to connect the modules in the sequence you want. At the bottom or top of the modules are terminals, where you connect the wires from one to the other. The terminals are typed, meaning you can only connect an output to an input that has the same type.

The canvas tag is a HTML tag that provides a fixed drawing area that can be used to draw graphics. The tag is manipulated using Javascript to create 2D drawing primitives such as lines, circles, polygons and even gradients. While many browsers support the canvas tag natively, some do not. For example, IE does not support canvas natively. To address this, IE uses a canvas wrapper, excanvas (created by Google) to ensure full cross-browser compatibility.

The canvas tag enabled us to leverage the built-in capabilities of CSS and the DOM for the rest of the interface while still providing us with 2D drawing capabilities. We observed a few issues with the canvas tag that developers should be cognizant of when considering to use it in their applications:

If you would like to learn more and talk with us about the pros and cons of canvas and some of the interesting challenges above, visit us at the Developer Sandbox at Google I/O coming up in a couple weeks.

By Paul Donnelly and Jonathan Trevor of the Yahoo! Pipes Team