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

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]

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,
+}
+

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,
+}
+
+

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(()),
+    }
+}
+

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;

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);
+};
+
+

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);
+};
+

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;
+

components/script/lib.rs

@@ -56,6 +56,7 @@ pub mod cors;
 
 #[macro_use]
 pub mod dom;
+
 pub mod parse;
 
 pub mod layout_interface;