script: Implement enough 2D canvas support to render basic SVGs such as the tiger.

13 files changed, 365 insertions, 36 deletions

diff --git a/components/canvas/Cargo.toml b/components/canvas/Cargo.toml
index b00687e3ca4..a682f1069bb 100644
--- a/components/canvas/Cargo.toml
+++ b/components/canvas/Cargo.toml
@@ -10,6 +10,9 @@ path = "lib.rs"
 [dependencies.azure]
 git = "https://github.com/servo/rust-azure"
 
+[dependencies.cssparser]
+git = "https://github.com/servo/rust-cssparser"
+
 [dependencies.geom]
 git = "https://github.com/servo/rust-geom"
 
diff --git a/components/canvas/canvas_paint_task.rs b/components/canvas/canvas_paint_task.rs
index 6d7b0c0fb18..6843e4f3c07 100644
--- a/components/canvas/canvas_paint_task.rs
+++ b/components/canvas/canvas_paint_task.rs
@@ -2,9 +2,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-use azure::azure_hl::{DrawTarget, SurfaceFormat, BackendType, StrokeOptions, DrawOptions};
-use azure::azure_hl::{ColorPattern, PatternRef, JoinStyle, CapStyle, DrawSurfaceOptions, Filter};
-use azure::AzFloat;
+use azure::azure::AzFloat;
+use azure::azure_hl::{DrawTarget, SurfaceFormat, BackendType, StrokeOptions, DrawOptions, Pattern};
+use azure::azure_hl::{ColorPattern, PathBuilder, JoinStyle, CapStyle, DrawSurfaceOptions, Filter};
+use geom::matrix2d::Matrix2D;
 use geom::point::Point2D;
 use geom::rect::Rect;
 use geom::size::Size2D;
@@ -12,6 +13,7 @@ use gfx::color;
 use util::task::spawn_named;
 use util::vec::byte_swap;
 
+use cssparser::RGBA;
 use std::borrow::ToOwned;
 use std::ops::Add;
 use std::sync::mpsc::{channel, Sender};
@@ -21,6 +23,14 @@ pub enum CanvasMsg {
     FillRect(Rect<f32>),
     ClearRect(Rect<f32>),
     StrokeRect(Rect<f32>),
+    BeginPath,
+    ClosePath,
+    Fill,
+    MoveTo(Point2D<f32>),
+    BezierCurveTo(Point2D<f32>, Point2D<f32>, Point2D<f32>),
+    SetFillStyle(FillOrStrokeStyle),
+    SetStrokeStyle(FillOrStrokeStyle),
+    SetTransform(Matrix2D<f32>),
     Recreate(Size2D<i32>),
     SendPixelContents(Sender<Vec<u8>>),
     GetImageData(Rect<i32>, Size2D<i32>, Sender<Vec<u8>>),
@@ -30,18 +40,26 @@ pub enum CanvasMsg {
 
 pub struct CanvasPaintTask<'a> {
     drawtarget: DrawTarget,
-    fill_color: ColorPattern,
-    stroke_color: ColorPattern,
+    fill_style: Pattern,
+    stroke_style: Pattern,
     stroke_opts: StrokeOptions<'a>,
+    /// TODO(pcwalton): Support multiple paths.
+    path_builder: PathBuilder,
+    /// The current 2D transform matrix.
+    transform: Matrix2D<f32>,
 }
 
 impl<'a> CanvasPaintTask<'a> {
     fn new(size: Size2D<i32>) -> CanvasPaintTask<'a> {
+        let draw_target = CanvasPaintTask::create(size);
+        let path_builder = draw_target.create_path_builder();
         CanvasPaintTask {
-            drawtarget: CanvasPaintTask::create(size),
-            fill_color: ColorPattern::new(color::black()),
-            stroke_color: ColorPattern::new(color::black()),
+            drawtarget: draw_target,
+            fill_style: Pattern::Color(ColorPattern::new(color::black())),
+            stroke_style: Pattern::Color(ColorPattern::new(color::black())),
             stroke_opts: StrokeOptions::new(1.0, JoinStyle::MiterOrBevel, CapStyle::Butt, 1.0, &[]),
+            path_builder: path_builder,
+            transform: Matrix2D::identity(),
         }
     }
 
@@ -55,6 +73,16 @@ impl<'a> CanvasPaintTask<'a> {
                     CanvasMsg::FillRect(ref rect) => painter.fill_rect(rect),
                     CanvasMsg::StrokeRect(ref rect) => painter.stroke_rect(rect),
                     CanvasMsg::ClearRect(ref rect) => painter.clear_rect(rect),
+                    CanvasMsg::BeginPath => painter.begin_path(),
+                    CanvasMsg::ClosePath => painter.close_path(),
+                    CanvasMsg::Fill => painter.fill(),
+                    CanvasMsg::MoveTo(ref point) => painter.move_to(point),
+                    CanvasMsg::BezierCurveTo(ref cp1, ref cp2, ref pt) => {
+                        painter.bezier_curve_to(cp1, cp2, pt)
+                    }
+                    CanvasMsg::SetFillStyle(style) => painter.set_fill_style(style),
+                    CanvasMsg::SetStrokeStyle(style) => painter.set_stroke_style(style),
+                    CanvasMsg::SetTransform(ref matrix) => painter.set_transform(matrix),
                     CanvasMsg::Recreate(size) => painter.recreate(size),
                     CanvasMsg::SendPixelContents(chan) => painter.send_pixel_contents(chan),
                     CanvasMsg::GetImageData(dest_rect, canvas_size, chan) => painter.get_image_data(dest_rect, canvas_size, chan),
@@ -69,7 +97,7 @@ impl<'a> CanvasPaintTask<'a> {
 
     fn fill_rect(&self, rect: &Rect<f32>) {
         let drawopts = DrawOptions::new(1.0, 0);
-        self.drawtarget.fill_rect(rect, PatternRef::Color(&self.fill_color), Some(&drawopts));
+        self.drawtarget.fill_rect(rect, self.fill_style.to_pattern_ref(), Some(&drawopts));
     }
 
     fn clear_rect(&self, rect: &Rect<f32>) {
@@ -78,7 +106,58 @@ impl<'a> CanvasPaintTask<'a> {
 
     fn stroke_rect(&self, rect: &Rect<f32>) {
         let drawopts = DrawOptions::new(1.0, 0);
-        self.drawtarget.stroke_rect(rect, &self.stroke_color, &self.stroke_opts, &drawopts);
+        match self.stroke_style {
+            Pattern::Color(ref color) => {
+                self.drawtarget.stroke_rect(rect, color, &self.stroke_opts, &drawopts)
+            }
+            _ => {
+                // TODO(pcwalton)
+            }
+        };
+    }
+
+    fn begin_path(&mut self) {
+        self.path_builder = self.drawtarget.create_path_builder()
+    }
+
+    fn close_path(&self) {
+        self.path_builder.close()
+    }
+
+    fn fill(&self) {
+        let draw_options = DrawOptions::new(1.0, 0);
+        match self.fill_style {
+            Pattern::Color(ref color) => {
+                self.drawtarget.fill(&self.path_builder.finish(), color, &draw_options);
+            }
+            _ => {
+                // TODO(pcwalton)
+            }
+        };
+    }
+
+    fn move_to(&self, point: &Point2D<AzFloat>) {
+        self.path_builder.move_to(*point)
+    }
+
+    fn bezier_curve_to(&self,
+                       cp1: &Point2D<AzFloat>,
+                       cp2: &Point2D<AzFloat>,
+                       endpoint: &Point2D<AzFloat>) {
+        self.path_builder.bezier_curve_to(cp1, cp2, endpoint)
+    }
+
+    fn set_fill_style(&mut self, style: FillOrStrokeStyle) {
+        self.fill_style = style.to_azure_pattern()
+    }
+
+    fn set_stroke_style(&mut self, style: FillOrStrokeStyle) {
+        self.stroke_style = style.to_azure_pattern()
+    }
+
+    fn set_transform(&mut self, transform: &Matrix2D<f32>) {
+        self.transform = *transform;
+        self.drawtarget.set_transform(transform)
     }
 
     fn create(size: Size2D<i32>) -> DrawTarget {
@@ -192,3 +271,22 @@ impl<'a> CanvasPaintTask<'a> {
         }
     }
 }
+
+#[derive(Clone)]
+pub enum FillOrStrokeStyle {
+    Color(RGBA),
+}
+
+impl FillOrStrokeStyle {
+    fn to_azure_pattern(&self) -> Pattern {
+        match *self {
+            FillOrStrokeStyle::Color(ref color) => {
+                Pattern::Color(ColorPattern::new(color::new(color.red,
+                                                            color.green,
+                                                            color.blue,
+                                                            color.alpha)))
+            }
+        }
+    }
+}
+
diff --git a/components/canvas/lib.rs b/components/canvas/lib.rs
index 32442c4c30c..fb06eccc9f3 100644
--- a/components/canvas/lib.rs
+++ b/components/canvas/lib.rs
@@ -8,6 +8,7 @@
 #![allow(missing_copy_implementations)]
 
 extern crate azure;
+extern crate cssparser;
 extern crate geom;
 extern crate gfx;
 extern crate util;
diff --git a/components/script/dom/bindings/trace.rs b/components/script/dom/bindings/trace.rs
index ebac215ec9f..b7d677a5878 100644
--- a/components/script/dom/bindings/trace.rs
+++ b/components/script/dom/bindings/trace.rs
@@ -35,6 +35,7 @@ use dom::bindings::utils::{Reflectable, Reflector, WindowProxyHandler};
 use script_task::ScriptChan;
 
 use cssparser::RGBA;
+use geom::matrix2d::Matrix2D;
 use geom::rect::Rect;
 use html5ever::tree_builder::QuirksMode;
 use hyper::header::Headers;
@@ -225,6 +226,7 @@ no_jsmanaged_fields!(WindowProxyHandler);
 no_jsmanaged_fields!(UntrustedNodeAddress);
 no_jsmanaged_fields!(LengthOrPercentageOrAuto);
 no_jsmanaged_fields!(RGBA);
+no_jsmanaged_fields!(Matrix2D<T>);
 
 impl JSTraceable for Box<ScriptChan+Send> {
     #[inline]
diff --git a/components/script/dom/canvasgradient.rs b/components/script/dom/canvasgradient.rs
new file mode 100644
index 00000000000..def78ca7f33
--- /dev/null
+++ b/components/script/dom/canvasgradient.rs
@@ -0,0 +1,11 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+use dom::bindings::utils::Reflector;
+
+#[dom_struct]
+pub struct CanvasGradient {
+    reflector_: Reflector,
+}
+
diff --git a/components/script/dom/canvaspattern.rs b/components/script/dom/canvaspattern.rs
new file mode 100644
index 00000000000..f1010bf6f53
--- /dev/null
+++ b/components/script/dom/canvaspattern.rs
@@ -0,0 +1,12 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+use dom::bindings::utils::Reflector;
+
+#[dom_struct]
+pub struct CanvasPattern {
+    reflector_: Reflector,
+}
+
+
diff --git a/components/script/dom/canvasrenderingcontext2d.rs b/components/script/dom/canvasrenderingcontext2d.rs
index 4b2232ee2f5..d9a36a6b6d2 100644
--- a/components/script/dom/canvasrenderingcontext2d.rs
+++ b/components/script/dom/canvasrenderingcontext2d.rs
@@ -4,7 +4,9 @@
 
 use dom::bindings::codegen::Bindings::CanvasRenderingContext2DBinding;
 use dom::bindings::codegen::Bindings::CanvasRenderingContext2DBinding::CanvasRenderingContext2DMethods;
+use dom::bindings::codegen::Bindings::CanvasRenderingContext2DBinding::CanvasWindingRule;
 use dom::bindings::codegen::Bindings::ImageDataBinding::ImageDataMethods;
+use dom::bindings::codegen::UnionTypes::StringOrCanvasGradientOrCanvasPattern;
 use dom::bindings::error::Error::IndexSize;
 use dom::bindings::error::Fallible;
 use dom::bindings::global::{GlobalRef, GlobalField};
@@ -13,13 +15,16 @@ use dom::bindings::utils::{Reflector, reflect_dom_object};
 use dom::htmlcanvaselement::{HTMLCanvasElement, HTMLCanvasElementHelpers};
 use dom::imagedata::{ImageData, ImageDataHelpers};
 
+use cssparser::Color as CSSColor;
+use cssparser::{Parser, RGBA, ToCss};
+use geom::matrix2d::Matrix2D;
 use geom::point::Point2D;
 use geom::rect::Rect;
 use geom::size::Size2D;
 
-use canvas::canvas_paint_task::{CanvasMsg, CanvasPaintTask};
-use canvas::canvas_paint_task::CanvasMsg::{ClearRect, Close, FillRect, Recreate, StrokeRect, GetImageData, PutImageData};
+use canvas::canvas_paint_task::{CanvasMsg, CanvasPaintTask, FillOrStrokeStyle};
 
+use std::cell::Cell;
 use std::num::{Float, ToPrimitive};
 use std::sync::mpsc::{channel, Sender};
 
@@ -29,25 +34,43 @@ pub struct CanvasRenderingContext2D {
     global: GlobalField,
     renderer: Sender<CanvasMsg>,
     canvas: JS<HTMLCanvasElement>,
+    stroke_color: Cell<RGBA>,
+    fill_color: Cell<RGBA>,
+    transform: Cell<Matrix2D<f32>>,
 }
 
 impl CanvasRenderingContext2D {
-    fn new_inherited(global: GlobalRef, canvas: JSRef<HTMLCanvasElement>, size: Size2D<i32>) -> CanvasRenderingContext2D {
+    fn new_inherited(global: GlobalRef, canvas: JSRef<HTMLCanvasElement>, size: Size2D<i32>)
+                     -> CanvasRenderingContext2D {
+        let black = RGBA {
+            red: 0.0,
+            green: 0.0,
+            blue: 0.0,
+            alpha: 1.0,
+        };
         CanvasRenderingContext2D {
             reflector_: Reflector::new(),
             global: GlobalField::from_rooted(&global),
             renderer: CanvasPaintTask::start(size),
             canvas: JS::from_rooted(canvas),
+            stroke_color: Cell::new(black),
+            fill_color: Cell::new(black),
+            transform: Cell::new(Matrix2D::identity()),
         }
     }
 
-    pub fn new(global: GlobalRef, canvas: JSRef<HTMLCanvasElement>, size: Size2D<i32>) -> Temporary<CanvasRenderingContext2D> {
+    pub fn new(global: GlobalRef, canvas: JSRef<HTMLCanvasElement>, size: Size2D<i32>)
+               -> Temporary<CanvasRenderingContext2D> {
         reflect_dom_object(box CanvasRenderingContext2D::new_inherited(global, canvas, size),
                            global, CanvasRenderingContext2DBinding::Wrap)
     }
 
     pub fn recreate(&self, size: Size2D<i32>) {
-        self.renderer.send(Recreate(size)).unwrap();
+        self.renderer.send(CanvasMsg::Recreate(size)).unwrap();
+    }
+
+    fn update_transform(&self) {
+        self.renderer.send(CanvasMsg::SetTransform(self.transform.get())).unwrap()
     }
 }
 
@@ -66,19 +89,125 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
         Temporary::new(self.canvas)
     }
 
+    fn Scale(self, x: f64, y: f64) {
+        self.transform.set(self.transform.get().scale(x as f32, y as f32));
+        self.update_transform()
+    }
+
+    fn Translate(self, x: f64, y: f64) {
+        self.transform.set(self.transform.get().translate(x as f32, y as f32));
+        self.update_transform()
+    }
+
+    fn Transform(self, a: f64, b: f64, c: f64, d: f64, e: f64, f: f64) {
+        self.transform.set(self.transform.get().mul(&Matrix2D::new(a as f32,
+                                                                   b as f32,
+                                                                   c as f32,
+                                                                   d as f32,
+                                                                   e as f32,
+                                                                   f as f32)));
+        self.update_transform()
+    }
+
+    fn SetTransform(self, a: f64, b: f64, c: f64, d: f64, e: f64, f: f64) {
+        self.transform.set(Matrix2D::new(a as f32,
+                                         b as f32,
+                                         c as f32,
+                                         d as f32,
+                                         e as f32,
+                                         f as f32));
+        self.update_transform()
+    }
+
     fn FillRect(self, x: f64, y: f64, width: f64, height: f64) {
         let rect = Rect(Point2D(x as f32, y as f32), Size2D(width as f32, height as f32));
-        self.renderer.send(FillRect(rect)).unwrap();
+        self.renderer.send(CanvasMsg::FillRect(rect)).unwrap();
     }
 
     fn ClearRect(self, x: f64, y: f64, width: f64, height: f64) {
         let rect = Rect(Point2D(x as f32, y as f32), Size2D(width as f32, height as f32));
-        self.renderer.send(ClearRect(rect)).unwrap();
+        self.renderer.send(CanvasMsg::ClearRect(rect)).unwrap();
     }
 
     fn StrokeRect(self, x: f64, y: f64, width: f64, height: f64) {
         let rect = Rect(Point2D(x as f32, y as f32), Size2D(width as f32, height as f32));
-        self.renderer.send(StrokeRect(rect)).unwrap();
+        self.renderer.send(CanvasMsg::StrokeRect(rect)).unwrap();
+    }
+
+    fn BeginPath(self) {
+        self.renderer.send(CanvasMsg::BeginPath).unwrap();
+    }
+
+    fn ClosePath(self) {
+        self.renderer.send(CanvasMsg::ClosePath).unwrap();
+    }
+
+    fn Fill(self, _: CanvasWindingRule) {
+        self.renderer.send(CanvasMsg::Fill).unwrap();
+    }
+
+    fn MoveTo(self, x: f64, y: f64) {
+        self.renderer.send(CanvasMsg::MoveTo(Point2D(x as f32, y as f32))).unwrap();
+    }
+
+    fn BezierCurveTo(self, cp1x: f64, cp1y: f64, cp2x: f64, cp2y: f64, x: f64, y: f64) {
+        self.renderer.send(CanvasMsg::BezierCurveTo(Point2D(cp1x as f32, cp1y as f32),
+                                                    Point2D(cp2x as f32, cp2y as f32),
+                                                    Point2D(x as f32, y as f32))).unwrap();
+    }
+
+    fn StrokeStyle(self) -> StringOrCanvasGradientOrCanvasPattern {
+        // FIXME(pcwalton, #4761): This is not spec-compliant. See:
+        //
+        // https://html.spec.whatwg.org/multipage/scripting.html#serialisation-of-a-colour
+        let mut result = String::new();
+        self.stroke_color.get().to_css(&mut result).unwrap();
+        StringOrCanvasGradientOrCanvasPattern::eString(result)
+    }
+
+    fn SetStrokeStyle(self, value: StringOrCanvasGradientOrCanvasPattern) {
+        match value {
+            StringOrCanvasGradientOrCanvasPattern::eString(string) => {
+                match parse_color(string.as_slice()) {
+                    Ok(rgba) => {
+                        self.stroke_color.set(rgba);
+                        self.renderer
+                            .send(CanvasMsg::SetStrokeStyle(FillOrStrokeStyle::Color(rgba)))
+                            .unwrap();
+                    }
+                    _ => {}
+                }
+            }
+            _ => {
+                // TODO(pcwalton)
+            }
+        }
+    }
+
+    fn FillStyle(self) -> StringOrCanvasGradientOrCanvasPattern {
+        // FIXME(pcwalton, #4761): This is not spec-compliant. See:
+        //
+        // https://html.spec.whatwg.org/multipage/scripting.html#serialisation-of-a-colour
+        let mut result = String::new();
+        self.stroke_color.get().to_css(&mut result).unwrap();
+        StringOrCanvasGradientOrCanvasPattern::eString(result)
+    }
+
+    fn SetFillStyle(self, value: StringOrCanvasGradientOrCanvasPattern) {
+        match value {
+            StringOrCanvasGradientOrCanvasPattern::eString(string) => {
+                match parse_color(string.as_slice()) {
+                    Ok(rgba) => {
+                        self.fill_color.set(rgba);
+                        self.renderer
+                            .send(CanvasMsg::SetFillStyle(FillOrStrokeStyle::Color(rgba)))
+                            .unwrap()
+                    }
+                    _ => {}
+                }
+            }
+            _ => {}
+        }
     }
 
     fn CreateImageData(self, sw: f64, sh: f64) -> Fallible<Temporary<ImageData>> {
@@ -101,7 +230,7 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
         let (sender, receiver) = channel::<Vec<u8>>();
         let dest_rect = Rect(Point2D(sx.to_i32().unwrap(), sy.to_i32().unwrap()), Size2D(sw.to_i32().unwrap(), sh.to_i32().unwrap()));
         let canvas_size = self.canvas.root().r().get_size();
-        self.renderer.send(GetImageData(dest_rect, canvas_size, sender)).unwrap();
+        self.renderer.send(CanvasMsg::GetImageData(dest_rect, canvas_size, sender)).unwrap();
         let data = receiver.recv().unwrap();
         Ok(ImageData::new(self.global.root().r(), sw.abs().to_u32().unwrap(), sh.abs().to_u32().unwrap(), Some(data)))
     }
@@ -111,7 +240,7 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
         let image_data_rect = Rect(Point2D(dx.to_i32().unwrap(), dy.to_i32().unwrap()), imagedata.get_size());
         let dirty_rect = None;
         let canvas_size = self.canvas.root().r().get_size();
-        self.renderer.send(PutImageData(data, image_data_rect, dirty_rect, canvas_size)).unwrap()
+        self.renderer.send(CanvasMsg::PutImageData(data, image_data_rect, dirty_rect, canvas_size)).unwrap()
     }
 
     fn PutImageData_(self, imagedata: JSRef<ImageData>, dx: f64, dy: f64,
@@ -124,13 +253,21 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
                                    Size2D(dirtyWidth.to_i32().unwrap(),
                                           dirtyHeight.to_i32().unwrap())));
         let canvas_size = self.canvas.root().r().get_size();
-        self.renderer.send(PutImageData(data, image_data_rect, dirty_rect, canvas_size)).unwrap()
+        self.renderer.send(CanvasMsg::PutImageData(data, image_data_rect, dirty_rect, canvas_size)).unwrap()
     }
 }
 
 #[unsafe_destructor]
 impl Drop for CanvasRenderingContext2D {
     fn drop(&mut self) {
-        self.renderer.send(Close).unwrap();
+        self.renderer.send(CanvasMsg::Close).unwrap();
     }
 }
+
+pub fn parse_color(string: &str) -> Result<RGBA,()> {
+    match CSSColor::parse(&mut Parser::new(string.as_slice())) {
+        Ok(CSSColor::RGBA(rgba)) => Ok(rgba),
+        _ => Err(()),
+    }
+}
+
diff --git a/components/script/dom/mod.rs b/components/script/dom/mod.rs
index 1d95cf1d2d5..7d115d1b1ed 100644
--- a/components/script/dom/mod.rs
+++ b/components/script/dom/mod.rs
@@ -195,6 +195,8 @@ pub mod activation;
 pub mod attr;
 pub mod blob;
 pub mod browsercontext;
+pub mod canvasgradient;
+pub mod canvaspattern;
 pub mod canvasrenderingcontext2d;
 pub mod characterdata;
 pub mod cssstyledeclaration;
diff --git a/components/script/dom/webidls/CanvasGradient.webidl b/components/script/dom/webidls/CanvasGradient.webidl
new file mode 100644
index 00000000000..1dc1ac4c1f0
--- /dev/null
+++ b/components/script/dom/webidls/CanvasGradient.webidl
@@ -0,0 +1,12 @@
+/* -*- Mode: IDL; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+interface CanvasGradient {
+  // opaque object
+  // addColorStop should take a double
+  //void addColorStop(float offset, DOMString color);
+};
+
+
diff --git a/components/script/dom/webidls/CanvasPattern.webidl b/components/script/dom/webidls/CanvasPattern.webidl
new file mode 100644
index 00000000000..06a77d0a62d
--- /dev/null
+++ b/components/script/dom/webidls/CanvasPattern.webidl
@@ -0,0 +1,9 @@
+/* -*- Mode: IDL; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+interface CanvasPattern {
+  //void setTransform(SVGMatrix matrix);
+};
+
diff --git a/components/script/dom/webidls/CanvasRenderingContext2D.webidl b/components/script/dom/webidls/CanvasRenderingContext2D.webidl
index 6cef3012c25..21925c2448f 100644
--- a/components/script/dom/webidls/CanvasRenderingContext2D.webidl
+++ b/components/script/dom/webidls/CanvasRenderingContext2D.webidl
@@ -3,6 +3,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+enum CanvasWindingRule { "nonzero", "evenodd" };
+
 // http://www.whatwg.org/html/#2dcontext
 //[Constructor(optional unsigned long width, unsigned long height), Exposed=Window,Worker]
 interface CanvasRenderingContext2D {
@@ -23,11 +25,21 @@ interface CanvasRenderingContext2D {
 
   // transformations (default transform is the identity matrix)
   //         attribute SVGMatrix currentTransform;
-  //void scale(unrestricted double x, unrestricted double y);
+  void scale(/*unrestricted*/ double x, /*unrestricted*/ double y);
   //void rotate(unrestricted double angle);
-  //void translate(unrestricted double x, unrestricted double y);
-  //void transform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);
-  //void setTransform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);
+  void translate(/*unrestricted*/ double x, /*unrestricted*/ double y);
+  void transform(/*unrestricted*/ double a,
+                 /*unrestricted*/ double b,
+                 /*unrestricted*/ double c,
+                 /*unrestricted*/ double d,
+                 /*unrestricted*/ double e,
+                 /*unrestricted*/ double f);
+  void setTransform(/*unrestricted*/ double a,
+                    /*unrestricted*/ double b,
+                    /*unrestricted*/ double c,
+                    /*unrestricted*/ double d,
+                    /*unrestricted*/ double e,
+                    /*unrestricted*/ double f);
   //void resetTransform();
 
   // compositing
@@ -38,8 +50,8 @@ interface CanvasRenderingContext2D {
   //         attribute boolean imageSmoothingEnabled; // (default true)
 
   // colours and styles (see also the CanvasDrawingStyles interface)
-  //         attribute (DOMString or CanvasGradient or CanvasPattern) strokeStyle; // (default black)
-  //         attribute (DOMString or CanvasGradient or CanvasPattern) fillStyle; // (default black)
+           attribute (DOMString or CanvasGradient or CanvasPattern) strokeStyle; // (default black)
+           attribute (DOMString or CanvasGradient or CanvasPattern) fillStyle; // (default black)
   //CanvasGradient createLinearGradient(double x0, double y0, double x1, double y1);
   //CanvasGradient createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1);
   //CanvasPattern createPattern(CanvasImageSource image, [TreatNullAs=EmptyString] DOMString repetition);
@@ -62,9 +74,9 @@ interface CanvasRenderingContext2D {
   void strokeRect(double x, double y, double w, double h);
 
   // path API (see also CanvasPathMethods)
-  //void beginPath();
-  //void fill(optional CanvasFillRule fillRule = "nonzero");
-  //void fill(Path2D path, optional CanvasFillRule fillRule = "nonzero");
+  void beginPath();
+  void fill(optional CanvasWindingRule fillRule = "nonzero");
+  //void fill(Path2D path, optional CanvasWindingRule fillRule = "nonzero");
   //void stroke();
   //void stroke(Path2D path);
   //void drawSystemFocusRing(Element element);
@@ -73,11 +85,11 @@ interface CanvasRenderingContext2D {
   //boolean drawCustomFocusRing(Path2D path, Element element);
   //void scrollPathIntoView();
   //void scrollPathIntoView(Path2D path);
-  //void clip(optional CanvasFillRule fillRule = "nonzero");
-  //void clip(Path2D path, optional CanvasFillRule fillRule = "nonzero");
+  //void clip(optional CanvasWindingRule fillRule = "nonzero");
+  //void clip(Path2D path, optional CanvasWindingRule fillRule = "nonzero");
   //void resetClip();
-  //boolean isPointInPath(unrestricted double x, unrestricted double y, optional CanvasFillRule fillRule = "nonzero");
-  //boolean isPointInPath(Path2D path, unrestricted double x, unrestricted double y, optional CanvasFillRule fillRule = "nonzero");
+  //boolean isPointInPath(unrestricted double x, unrestricted double y, optional CanvasWindingRule fillRule = "nonzero");
+  //boolean isPointInPath(Path2D path, unrestricted double x, unrestricted double y, optional CanvasWindingRule fillRule = "nonzero");
   //boolean isPointInStroke(unrestricted double x, unrestricted double y);
   //boolean isPointInStroke(Path2D path, unrestricted double x, unrestricted double y);
 
@@ -105,3 +117,31 @@ interface CanvasRenderingContext2D {
   void putImageData(ImageData imagedata, double dx, double dy);
   void putImageData(ImageData imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
 };
+
+[NoInterfaceObject]
+interface CanvasPathMethods {
+  // shared path API methods
+  void closePath();
+  void moveTo(/*unrestricted*/ double x, /*unrestricted*/ double y);
+  //void lineTo(double x, double y);
+  //void quadraticCurveTo(double cpx, double cpy, double x, double y);
+
+  void bezierCurveTo(/*unrestricted*/ double cp1x,
+                     /*unrestricted*/ double cp1y,
+                     /*unrestricted*/ double cp2x,
+                     /*unrestricted*/ double cp2y,
+                     /*unrestricted*/ double x,
+                     /*unrestricted*/ double y);
+
+  //void arcTo(double x1, double y1, double x2, double y2, double radius); 
+// NOT IMPLEMENTED  [LenientFloat] void arcTo(double x1, double y1, double x2, double y2, double radiusX, double radiusY, double rotation);
+
+  //void rect(double x, double y, double w, double h);
+
+  //void arc(double x, double y, double radius, double startAngle, double endAngle, optional boolean anticlockwise = false); 
+// NOT IMPLEMENTED  [LenientFloat] void ellipse(double x, double y, double radiusX, double radiusY, double rotation, double startAngle, double endAngle, boolean anticlockwise);
+};
+
+
+CanvasRenderingContext2D implements CanvasPathMethods;
+
diff --git a/components/script/lib.rs b/components/script/lib.rs
index 35d481d5b76..a35e3c2ee89 100644
--- a/components/script/lib.rs
+++ b/components/script/lib.rs
@@ -56,6 +56,7 @@ pub mod cors;
 
 #[macro_use]
 pub mod dom;
+
 pub mod parse;
 
 pub mod layout_interface;
diff --git a/components/servo/Cargo.lock b/components/servo/Cargo.lock
index 5df5fce9ea4..00bedcf93f6 100644
--- a/components/servo/Cargo.lock
+++ b/components/servo/Cargo.lock
@@ -36,7 +36,7 @@ dependencies = [
 [[package]]
 name = "azure"
 version = "0.1.0"
-source = "git+https://github.com/servo/rust-azure#2c60291733afe631eba90105e9ac9c8847e89cac"
+source = "git+https://github.com/servo/rust-azure#3fa95e4ce2c12234e75b7a68b1a2542e3804b67c"
 dependencies = [
  "core_foundation 0.1.0 (git+https://github.com/servo/rust-core-foundation)",
  "core_graphics 0.1.0 (git+https://github.com/servo/rust-core-graphics)",
@@ -59,6 +59,7 @@ name = "canvas"
 version = "0.0.1"
 dependencies = [
  "azure 0.1.0 (git+https://github.com/servo/rust-azure)",
+ "cssparser 0.2.0 (git+https://github.com/servo/rust-cssparser)",
  "geom 0.1.0 (git+https://github.com/servo/rust-geom)",
  "gfx 0.0.1",
  "util 0.0.1",