Start prototyping what DisplayList support will look like.

experimental/SkV8Example/gears.js

Index: experimental/SkV8Example/gears.js
diff --git a/experimental/SkV8Example/gears.js b/experimental/SkV8Example/gears.js
index 1c5a272e4f40a73725a20b838ff5de6cfabf003f..a901f9d9211e927df000e4385ff33e5838155805 100644
--- a/experimental/SkV8Example/gears.js
+++ b/experimental/SkV8Example/gears.js
@@ -1,5 +1,6 @@
 var IS_SKV8 = typeof document == "undefined";
 var HAS_PATH = typeof Path2D != "undefined";
+var HAS_DISPLAY_LIST = typeof DisplayList != "undefined";
 
 var NumTeeth = 24;
 var NumGears = 60;
@@ -32,6 +33,36 @@ function gearPath(r) {
   }
 }
 
+function gearDisplayListStroke(r, color) {
+  if (HAS_DISPLAY_LIST) {
+    p = new Path2D();
+    makeGear(p, r)
+    p.closePath();
+    var dl = new DisplayList();
+    dl.strokeStyle = color;
+    dl.stroke(p);
+    dl.finalize()
+    return dl;
+  } else {
+    return null;
+  }
+}
+
+function gearDisplayListFill(r, color) {
+  if (HAS_DISPLAY_LIST) {
+    p = new Path2D();
+    makeGear(p, r)
+    p.closePath();
+    var dl = new DisplayList();
+    dl.fillStyle = color;
+    dl.fill(p);
+    dl.finalize()
+    return dl;
+  } else {
+    return null;
+  }
+}
+
 function strokeGear(ctx, gear) {
   if (HAS_PATH) {
     ctx.stroke(gear.path);
@@ -63,9 +94,17 @@ function draw3DGear(ctx, angle, gear) {
     ctx.rotate(-angle);
     ctx.translate(0.707, 0.707);
     ctx.rotate(angle);
-    strokeGear(ctx, gear);
+    if (HAS_DISPLAY_LIST) {
+        ctx.draw(gear.gearStroke);
+    } else {
+        strokeGear(ctx, gear);
+    }
+  }
+  if (HAS_DISPLAY_LIST) {
+      ctx.draw(gear.gearFill);
+  } else {
+      fillGear(ctx, gear);
   }
-  fillGear(ctx, gear);
   ctx.rotate(-angle);
 }
 
@@ -88,6 +127,8 @@ var onDraw = function() {
         x: Math.random()*500,
         y: Math.random()*500,
         path: gearPath(r),
+        gearFill: gearDisplayListFill(r, FaceColors[color]),
+        gearStroke: gearDisplayListStroke(r, SideColors[color]),
         r: r,
         faceColor: FaceColors[color],
         sideColor: SideColors[color]