Thursday, December 21st, 2006

Create cross browser vector graphics with Dojo

Category: Canvas, Dojo, UI

Dylan Schiemann, co-creator of the Dojo toolkit, has written a broad piece on creating cross browser vector graphics with Dojo.

The article delves into the new dojo.gfx library that abstracts the slight mess of SVG vs. Canvas vs. VML.

One of the examples in the article discusses drawing a clock with this snippet that shows drawing the clock hands, along with their shadows:


  1. this.shadows.hour.shadow = this._initPoly(this.surface, hP)
  2.     .setFill([0, 0, 0, 0.1]);
  3. this.hands.hour = this._initPoly(this.surface, hP)
  4.     .setStroke({color: this.handStroke, width:1 })
  5.     .setFill({
  6.         type:"linear",
  7.         x1:0, y1:0, x2:0, y2:-27,
  8.         colors:[{offset:0, color:"#fff"}, {offset:0.33, color:this.handColor}]
  9.     });
  10. this.shadows.minute.shadow = this._initPoly(this.surface, mP)
  11.     .setFill([0, 0, 0, 0.1]);
  12. this.hands.minute = this._initPoly(this.surface, mP)
  13.     .setStroke({color: this.handStroke, width:1 })
  14.     .setFill({
  15.         type:"linear",
  16.         x1:0, y1:0, x2:0, y2:-38,
  17.         colors:[{offset:0, color:"#fff"}, {offset:0.33, color:this.handColor}]
  18.     });

What features are supported

  • Strokes (borders)
  • Fills
  • Shapes and Paths
  • Opacity
  • Linear Transformations
  • Rounded Corners

If you have wanted “the ability to draw and modify non-rectangular, browser-native shapes” then check out the article and dig deeper:

Posted by Dion Almaer at 8:30 am

4.1 rating from 30 votes


Comments feed TrackBack URI

fantastic tool for friendly interfaces

Comment by madeiras — December 21, 2006

-> walter zorn

Comment by daniel koller — December 21, 2006

All obvious reasons why I should be supportive of this aside – this is really genuinely super cool stuff. Great work guys. :)

Comment by Jesse Kuhnert — December 21, 2006

love dojo

Comment by Diego Carrion — December 21, 2006

I would love to see some performance metrics of this across browsers to get a sense for how fast this is.

Comment by Alexei White — December 21, 2006

Doesn’t work here. It first froze firefox for a few seconds then threw a bunch of exceptions.

Comment by Andy — December 21, 2006

Alexei: we’re working on a profiling testcase. From a qualitative perspective, Firefox 2 is much better than 1.5, and 3 alpha is better than 2. IE’s VML is the slowest, and for many operations, Safari’s WebKit is the fastest.

Andy: what specifically doesn’t work. If you want to contact me with more information, it would be helpful to track things down. Everything in the article was tested across browsers and platforms, but versions of Firefox prior to 1.5 did not support native vector graphics.

Comment by Dylan Schiemann — December 21, 2006

Dojo is great!

Comment by Mark Holton — December 21, 2006

@Dylan: It was throwing a bunch of exceptions in the Clock example while the rest were working. I am using FF2. Anyway, I tried it once more now and it seemed to work.

Comment by Andy — December 22, 2006

The charting engine was (essentially) profiled by Ryan Breen, see this entry:

Comment by Tom Trenka — December 22, 2006

another nice vector drawing javascript lib (no plugin required) for the vertor component
– or – for the complete AJAX RAD toolkit.



Comment by andreas herz — January 18, 2007

Dago best tool! may be create web screensaver?

Comment by Nikolas Buro — March 3, 2007

oh yes, i also think like that, u will see in the future that micro soft will show a new software which will cover all the facilities and all the programmes by the brower but right now firefox is going on the top and most of the people taking a lot of benefits from the firefox, and i and i am also giving the first priority to the firefox because it giving me all those actions or facilities which the every person wants.

Comment by jack — March 26, 2007

My experience tells me that we should keep senior roles close to the heart of the company and push output responsibility to the overseas studios management.

Comment by Frank fernandis — March 30, 2007

Leave a comment

You must be logged in to post a comment.