Layerize canvas

Note that this keeps using readback right now, `NativeSurface` painting
will be implemented soon.

Also see https://github.com/servo/servo/issues/6142

33 files changed, 711 insertions, 496 deletions

diff --git a/components/canvas/Cargo.toml b/components/canvas/Cargo.toml
index 52557fca98b..fd0072cb29e 100644
--- a/components/canvas/Cargo.toml
+++ b/components/canvas/Cargo.toml
@@ -13,17 +13,24 @@ git = "https://github.com/servo/rust-azure"
 [dependencies.geom]
 git = "https://github.com/servo/rust-geom"
 
+[dependencies.layers]
+git = "https://github.com/servo/rust-layers"
+
 [dependencies.gleam]
 git = "https://github.com/servo/gleam"
 
+[dependencies.canvas_traits]
+path = "../canvas_traits"
+
 [dependencies.util]
 path = "../util"
 
-[dependencies.gfx]
-path = "../gfx"
+[dependencies.gfx_traits]
+path = "../gfx_traits"
 
 [dependencies.offscreen_gl_context]
 git = "https://github.com/ecoal95/rust-offscreen-rendering-context"
+features = ["texture_surface"]
 
 [dependencies]
 cssparser = "0.3.1"
diff --git a/components/canvas/canvas_msg.rs b/components/canvas/canvas_msg.rs
deleted file mode 100644
index aa0df80eb22..00000000000
--- a/components/canvas/canvas_msg.rs
+++ /dev/null
@@ -1,83 +0,0 @@
-/* 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 canvas_paint_task::{FillOrStrokeStyle, LineCapStyle, LineJoinStyle, CompositionOrBlending};
-use geom::matrix2d::Matrix2D;
-use geom::point::Point2D;
-use geom::rect::Rect;
-use geom::size::Size2D;
-use std::sync::mpsc::{Sender};
-
-#[derive(Clone)]
-pub enum CanvasMsg {
-    Canvas2d(Canvas2dMsg),
-    Common(CanvasCommonMsg),
-    WebGL(CanvasWebGLMsg),
-}
-
-#[derive(Clone)]
-pub enum Canvas2dMsg {
-    Arc(Point2D<f32>, f32, f32, f32, bool),
-    ArcTo(Point2D<f32>, Point2D<f32>, f32),
-    DrawImage(Vec<u8>, Size2D<f64>, Rect<f64>, Rect<f64>, bool),
-    DrawImageSelf(Size2D<f64>, Rect<f64>, Rect<f64>, bool),
-    BeginPath,
-    BezierCurveTo(Point2D<f32>, Point2D<f32>, Point2D<f32>),
-    ClearRect(Rect<f32>),
-    Clip,
-    ClosePath,
-    Fill,
-    FillRect(Rect<f32>),
-    GetImageData(Rect<f64>, Size2D<f64>, Sender<Vec<u8>>),
-    LineTo(Point2D<f32>),
-    MoveTo(Point2D<f32>),
-    PutImageData(Vec<u8>, Rect<f64>, Option<Rect<f64>>),
-    QuadraticCurveTo(Point2D<f32>, Point2D<f32>),
-    Rect(Rect<f32>),
-    RestoreContext,
-    SaveContext,
-    StrokeRect(Rect<f32>),
-    Stroke,
-    SetFillStyle(FillOrStrokeStyle),
-    SetStrokeStyle(FillOrStrokeStyle),
-    SetLineWidth(f32),
-    SetLineCap(LineCapStyle),
-    SetLineJoin(LineJoinStyle),
-    SetMiterLimit(f32),
-    SetGlobalAlpha(f32),
-    SetGlobalComposition(CompositionOrBlending),
-    SetTransform(Matrix2D<f32>),
-}
-
-#[derive(Clone)]
-pub enum CanvasWebGLMsg {
-    AttachShader(u32, u32),
-    BindBuffer(u32, u32),
-    BufferData(u32, Vec<f32>, u32),
-    Clear(u32),
-    ClearColor(f32, f32, f32, f32),
-    CompileShader(u32),
-    CreateBuffer(Sender<u32>),
-    CreateProgram(Sender<u32>),
-    CreateShader(u32, Sender<u32>),
-    DrawArrays(u32, i32, i32),
-    EnableVertexAttribArray(u32),
-    GetAttribLocation(u32, String, Sender<i32>),
-    GetShaderInfoLog(u32, Sender<String>),
-    GetShaderParameter(u32, u32, Sender<i32>),
-    GetUniformLocation(u32, String, Sender<u32>),
-    LinkProgram(u32),
-    ShaderSource(u32, Vec<String>),
-    Uniform4fv(u32, Vec<f32>),
-    UseProgram(u32),
-    VertexAttribPointer2f(u32, i32, bool, i32, i64),
-    Viewport(i32, i32, i32, i32),
-}
-
-#[derive(Clone)]
-pub enum CanvasCommonMsg {
-    Close,
-    Recreate(Size2D<i32>),
-    SendPixelContents(Sender<Vec<u8>>),
-}
diff --git a/components/canvas/canvas_paint_task.rs b/components/canvas/canvas_paint_task.rs
index 6906b96aa5c..07860fe93cc 100644
--- a/components/canvas/canvas_paint_task.rs
+++ b/components/canvas/canvas_paint_task.rs
@@ -5,19 +5,18 @@
 use azure::azure::AzFloat;
 use azure::azure_hl::{DrawTarget, SurfaceFormat, BackendType, StrokeOptions, DrawOptions, Pattern};
 use azure::azure_hl::{ColorPattern, PathBuilder, DrawSurfaceOptions, Filter};
-use azure::azure_hl::{GradientStop, LinearGradientPattern, RadialGradientPattern, ExtendMode};
-use azure::azure_hl::{JoinStyle, CapStyle, CompositionOp};
-use canvas_msg::{CanvasMsg, Canvas2dMsg, CanvasCommonMsg};
+use azure::azure_hl::{JoinStyle, CapStyle};
+use canvas_traits::*;
 use geom::matrix2d::Matrix2D;
 use geom::point::Point2D;
 use geom::rect::Rect;
 use geom::size::Size2D;
-use gfx::color;
+use layers::platform::surface::NativeSurface;
+use gfx_traits::color;
 use num::ToPrimitive;
 use util::task::spawn_named;
 use util::vec::byte_swap;
 
-use cssparser::RGBA;
 use std::borrow::ToOwned;
 use std::mem;
 use std::sync::mpsc::{channel, Sender};
@@ -257,6 +256,8 @@ impl<'a> CanvasPaintTask<'a> {
                             CanvasCommonMsg::Recreate(size) => painter.recreate(size),
                             CanvasCommonMsg::SendPixelContents(chan) =>
                                 painter.send_pixel_contents(chan),
+                            CanvasCommonMsg::SendNativeSurface(chan) =>
+                                painter.send_native_surface(chan),
                         }
                     },
                     CanvasMsg::WebGL(_) => panic!("Wrong message sent to Canvas2D task"),
@@ -497,6 +498,14 @@ impl<'a> CanvasPaintTask<'a> {
         })
     }
 
+    fn send_native_surface(&self, chan: Sender<NativeSurface>) {
+        let mut native_surface: NativeSurface =
+            NativeSurface::from_draw_target_backing(self.drawtarget.backing.clone());
+        native_surface.mark_wont_leak();
+
+        chan.send(native_surface).unwrap();
+    }
+
     fn get_image_data(&self, mut dest_rect: Rect<f64>, canvas_size: Size2D<f64>, chan: Sender<Vec<u8>>) {
         if dest_rect.size.width < 0.0 {
             dest_rect.size.width = -dest_rect.size.width;
@@ -566,340 +575,6 @@ impl<'a> CanvasPaintTask<'a> {
     }
 }
 
-#[derive(Clone)]
-pub struct CanvasGradientStop {
-    pub offset: f64,
-    pub color: RGBA,
-}
-
-#[derive(Clone)]
-pub struct LinearGradientStyle {
-    pub x0: f64,
-    pub y0: f64,
-    pub x1: f64,
-    pub y1: f64,
-    pub stops: Vec<CanvasGradientStop>
-}
-
-impl LinearGradientStyle {
-    pub fn new(x0: f64, y0: f64, x1: f64, y1: f64, stops: Vec<CanvasGradientStop>)
-        -> LinearGradientStyle {
-        LinearGradientStyle {
-            x0: x0,
-            y0: y0,
-            x1: x1,
-            y1: y1,
-            stops: stops,
-        }
-    }
-}
-
-#[derive(Clone)]
-pub struct RadialGradientStyle {
-    pub x0: f64,
-    pub y0: f64,
-    pub r0: f64,
-    pub x1: f64,
-    pub y1: f64,
-    pub r1: f64,
-    pub stops: Vec<CanvasGradientStop>
-}
-
-impl RadialGradientStyle {
-    pub fn new(x0: f64, y0: f64, r0: f64, x1: f64, y1: f64, r1: f64, stops: Vec<CanvasGradientStop>)
-        -> RadialGradientStyle {
-        RadialGradientStyle {
-            x0: x0,
-            y0: y0,
-            r0: r0,
-            x1: x1,
-            y1: y1,
-            r1: r1,
-            stops: stops,
-        }
-    }
-}
-
-#[derive(Clone)]
-pub enum FillOrStrokeStyle {
-    Color(RGBA),
-    LinearGradient(LinearGradientStyle),
-    RadialGradient(RadialGradientStyle),
-}
-
-impl FillOrStrokeStyle {
-    fn to_azure_pattern(&self, drawtarget: &DrawTarget) -> Pattern {
-        match *self {
-            FillOrStrokeStyle::Color(ref color) => {
-                Pattern::Color(ColorPattern::new(color::new(color.red,
-                                                            color.green,
-                                                            color.blue,
-                                                            color.alpha)))
-            },
-            FillOrStrokeStyle::LinearGradient(ref linear_gradient_style) => {
-                let gradient_stops: Vec<GradientStop> = linear_gradient_style.stops.iter().map(|s| {
-                    GradientStop {
-                        offset: s.offset as AzFloat,
-                        color: color::new(s.color.red, s.color.green, s.color.blue, s.color.alpha)
-                    }
-                }).collect();
-
-                Pattern::LinearGradient(LinearGradientPattern::new(
-                    &Point2D(linear_gradient_style.x0 as AzFloat, linear_gradient_style.y0 as AzFloat),
-                    &Point2D(linear_gradient_style.x1 as AzFloat, linear_gradient_style.y1 as AzFloat),
-                    drawtarget.create_gradient_stops(&gradient_stops, ExtendMode::Clamp),
-                    &Matrix2D::identity()))
-            },
-            FillOrStrokeStyle::RadialGradient(ref radial_gradient_style) => {
-                let gradient_stops: Vec<GradientStop> = radial_gradient_style.stops.iter().map(|s| {
-                    GradientStop {
-                        offset: s.offset as AzFloat,
-                        color: color::new(s.color.red, s.color.green, s.color.blue, s.color.alpha)
-                    }
-                }).collect();
-
-                Pattern::RadialGradient(RadialGradientPattern::new(
-                    &Point2D(radial_gradient_style.x0 as AzFloat, radial_gradient_style.y0 as AzFloat),
-                    &Point2D(radial_gradient_style.x1 as AzFloat, radial_gradient_style.y1 as AzFloat),
-                    radial_gradient_style.r0 as AzFloat, radial_gradient_style.r1 as AzFloat,
-                    drawtarget.create_gradient_stops(&gradient_stops, ExtendMode::Clamp),
-                    &Matrix2D::identity()))
-            }
-        }
-    }
-}
-
-#[derive(Copy, Clone, PartialEq)]
-pub enum LineCapStyle {
-    Butt = 0,
-    Round = 1,
-    Square = 2,
-}
-
-impl LineCapStyle {
-    fn to_azure_style(&self) -> CapStyle {
-        match *self {
-            LineCapStyle::Butt => CapStyle::Butt,
-            LineCapStyle::Round => CapStyle::Round,
-            LineCapStyle::Square => CapStyle::Square,
-        }
-    }
-
-    pub fn from_str(string: &str) -> Option<LineCapStyle> {
-        match string {
-            "butt" => Some(LineCapStyle::Butt),
-            "round" => Some(LineCapStyle::Round),
-            "square" => Some(LineCapStyle::Square),
-            _ => None
-        }
-    }
-}
-
-#[derive(Copy, Clone, PartialEq)]
-pub enum LineJoinStyle {
-    Round = 0,
-    Bevel = 1,
-    Miter = 2,
-}
-
-impl LineJoinStyle {
-    fn to_azure_style(&self) -> JoinStyle {
-        match *self {
-            LineJoinStyle::Round => JoinStyle::Round,
-            LineJoinStyle::Bevel => JoinStyle::Bevel,
-            LineJoinStyle::Miter => JoinStyle::Miter,
-        }
-    }
-
-    pub fn from_str(string: &str) -> Option<LineJoinStyle> {
-        match string {
-            "round" => Some(LineJoinStyle::Round),
-            "bevel" => Some(LineJoinStyle::Bevel),
-            "miter" => Some(LineJoinStyle::Miter),
-            _ => None
-        }
-    }
-}
-
-#[derive(Copy, Clone, PartialEq)]
-pub enum CompositionStyle {
-    SrcIn,
-    SrcOut,
-    SrcOver,
-    SrcAtop,
-    DestIn,
-    DestOut,
-    DestOver,
-    DestAtop,
-    Copy,
-    Lighter,
-    Xor,
-}
-
-impl CompositionStyle {
-    fn to_azure_style(&self) -> CompositionOp {
-        match *self {
-            CompositionStyle::SrcIn    => CompositionOp::In,
-            CompositionStyle::SrcOut   => CompositionOp::Out,
-            CompositionStyle::SrcOver  => CompositionOp::Over,
-            CompositionStyle::SrcAtop  => CompositionOp::Atop,
-            CompositionStyle::DestIn   => CompositionOp::DestIn,
-            CompositionStyle::DestOut  => CompositionOp::DestOut,
-            CompositionStyle::DestOver => CompositionOp::DestOver,
-            CompositionStyle::DestAtop => CompositionOp::DestAtop,
-            CompositionStyle::Copy     => CompositionOp::Source,
-            CompositionStyle::Lighter  => CompositionOp::Add,
-            CompositionStyle::Xor      => CompositionOp::Xor,
-        }
-    }
-
-    pub fn from_str(string: &str) -> Option<CompositionStyle> {
-        match string {
-            "source-in"        => Some(CompositionStyle::SrcIn),
-            "source-out"       => Some(CompositionStyle::SrcOut),
-            "source-over"      => Some(CompositionStyle::SrcOver),
-            "source-atop"      => Some(CompositionStyle::SrcAtop),
-            "destination-in"   => Some(CompositionStyle::DestIn),
-            "destination-out"  => Some(CompositionStyle::DestOut),
-            "destination-over" => Some(CompositionStyle::DestOver),
-            "destination-atop" => Some(CompositionStyle::DestAtop),
-            "copy"             => Some(CompositionStyle::Copy),
-            "lighter"          => Some(CompositionStyle::Lighter),
-            "xor"              => Some(CompositionStyle::Xor),
-            _ => None
-        }
-    }
-
-    pub fn to_str(&self) -> &str {
-        match *self {
-            CompositionStyle::SrcIn    => "source-in",
-            CompositionStyle::SrcOut   => "source-out",
-            CompositionStyle::SrcOver  => "source-over",
-            CompositionStyle::SrcAtop  => "source-atop",
-            CompositionStyle::DestIn   => "destination-in",
-            CompositionStyle::DestOut  => "destination-out",
-            CompositionStyle::DestOver => "destination-over",
-            CompositionStyle::DestAtop => "destination-atop",
-            CompositionStyle::Copy     => "copy",
-            CompositionStyle::Lighter  => "lighter",
-            CompositionStyle::Xor      => "xor",
-        }
-    }
-}
-
-#[derive(Copy, Clone, PartialEq)]
-pub enum BlendingStyle {
-    Multiply,
-    Screen,
-    Overlay,
-    Darken,
-    Lighten,
-    ColorDodge,
-    ColorBurn,
-    HardLight,
-    SoftLight,
-    Difference,
-    Exclusion,
-    Hue,
-    Saturation,
-    Color,
-    Luminosity,
-}
-
-impl BlendingStyle {
-    fn to_azure_style(&self) -> CompositionOp {
-        match *self {
-            BlendingStyle::Multiply   => CompositionOp::Multiply,
-            BlendingStyle::Screen     => CompositionOp::Screen,
-            BlendingStyle::Overlay    => CompositionOp::Overlay,
-            BlendingStyle::Darken     => CompositionOp::Darken,
-            BlendingStyle::Lighten    => CompositionOp::Lighten,
-            BlendingStyle::ColorDodge => CompositionOp::ColorDodge,
-            BlendingStyle::ColorBurn  => CompositionOp::ColorBurn,
-            BlendingStyle::HardLight  => CompositionOp::HardLight,
-            BlendingStyle::SoftLight  => CompositionOp::SoftLight,
-            BlendingStyle::Difference => CompositionOp::Difference,
-            BlendingStyle::Exclusion  => CompositionOp::Exclusion,
-            BlendingStyle::Hue        => CompositionOp::Hue,
-            BlendingStyle::Saturation => CompositionOp::Saturation,
-            BlendingStyle::Color      => CompositionOp::Color,
-            BlendingStyle::Luminosity => CompositionOp::Luminosity,
-        }
-    }
-
-    pub fn from_str(string: &str) -> Option<BlendingStyle> {
-        match string {
-            "multiply"    => Some(BlendingStyle::Multiply),
-            "screen"      => Some(BlendingStyle::Screen),
-            "overlay"     => Some(BlendingStyle::Overlay),
-            "darken"      => Some(BlendingStyle::Darken),
-            "lighten"     => Some(BlendingStyle::Lighten),
-            "color-dodge" => Some(BlendingStyle::ColorDodge),
-            "color-burn"  => Some(BlendingStyle::ColorBurn),
-            "hard-light"  => Some(BlendingStyle::HardLight),
-            "soft-light"  => Some(BlendingStyle::SoftLight),
-            "difference"  => Some(BlendingStyle::Difference),
-            "exclusion"   => Some(BlendingStyle::Exclusion),
-            "hue"         => Some(BlendingStyle::Hue),
-            "saturation"  => Some(BlendingStyle::Saturation),
-            "color"       => Some(BlendingStyle::Color),
-            "luminosity"  => Some(BlendingStyle::Luminosity),
-            _ => None
-        }
-    }
-
-    pub fn to_str(&self) -> &str {
-        match *self {
-            BlendingStyle::Multiply   => "multiply",
-            BlendingStyle::Screen     => "screen",
-            BlendingStyle::Overlay    => "overlay",
-            BlendingStyle::Darken     => "darken",
-            BlendingStyle::Lighten    => "lighten",
-            BlendingStyle::ColorDodge => "color-dodge",
-            BlendingStyle::ColorBurn  => "color-burn",
-            BlendingStyle::HardLight  => "hard-light",
-            BlendingStyle::SoftLight  => "soft-light",
-            BlendingStyle::Difference => "difference",
-            BlendingStyle::Exclusion  => "exclusion",
-            BlendingStyle::Hue        => "hue",
-            BlendingStyle::Saturation => "saturation",
-            BlendingStyle::Color      => "color",
-            BlendingStyle::Luminosity => "luminosity",
-        }
-    }
-}
-
-#[derive(Copy, Clone, PartialEq)]
-pub enum CompositionOrBlending {
-    Composition(CompositionStyle),
-    Blending(BlendingStyle),
-}
-
-impl CompositionOrBlending {
-    fn to_azure_style(&self) -> CompositionOp {
-        match *self {
-            CompositionOrBlending::Composition(op) => op.to_azure_style(),
-            CompositionOrBlending::Blending(op) => op.to_azure_style(),
-        }
-    }
-
-    pub fn default() -> CompositionOrBlending {
-        CompositionOrBlending::Composition(CompositionStyle::SrcOver)
-    }
-
-    pub fn from_str(string: &str) -> Option<CompositionOrBlending> {
-        if let Some(op) = CompositionStyle::from_str(string) {
-            return Some(CompositionOrBlending::Composition(op));
-        }
-
-        if let Some(op) = BlendingStyle::from_str(string) {
-            return Some(CompositionOrBlending::Blending(op));
-        }
-
-        None
-    }
-}
-
 /// Used by drawImage to get rid of the extra pixels of the image data that
 /// won't be copied to the canvas
 /// image_data: Color pixel data of the image
diff --git a/components/canvas/lib.rs b/components/canvas/lib.rs
index 2fb0ea8b8f5..962231581ef 100644
--- a/components/canvas/lib.rs
+++ b/components/canvas/lib.rs
@@ -6,13 +6,15 @@
 #![feature(collections)]
 #![feature(rustc_private)]
 
+extern crate canvas_traits;
 extern crate azure;
 extern crate cssparser;
 extern crate geom;
-extern crate gfx;
+extern crate gfx_traits;
 extern crate util;
 extern crate gleam;
 extern crate num;
+extern crate layers;
 extern crate offscreen_gl_context;
 
 #[macro_use]
@@ -20,4 +22,3 @@ extern crate log;
 
 pub mod canvas_paint_task;
 pub mod webgl_paint_task;
-pub mod canvas_msg;
diff --git a/components/canvas/webgl_paint_task.rs b/components/canvas/webgl_paint_task.rs
index 155cbde2297..c98f30ebbad 100644
--- a/components/canvas/webgl_paint_task.rs
+++ b/components/canvas/webgl_paint_task.rs
@@ -2,7 +2,7 @@
  * 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 canvas_msg::{CanvasMsg, CanvasWebGLMsg, CanvasCommonMsg};
+use canvas_traits::{CanvasMsg, CanvasWebGLMsg, CanvasCommonMsg};
 use geom::size::Size2D;
 
 use gleam::gl;
@@ -14,7 +14,8 @@ use std::borrow::ToOwned;
 use std::slice::bytes::copy_memory;
 use std::sync::mpsc::{channel, Sender};
 use util::vec::byte_swap;
-use offscreen_gl_context::{GLContext, GLContextAttributes};
+use layers::platform::surface::NativeSurface;
+use offscreen_gl_context::{GLContext, GLContextAttributes, ColorAttachmentType};
 
 pub struct WebGLPaintTask {
     size: Size2D<i32>,
@@ -29,7 +30,9 @@ unsafe impl Send for WebGLPaintTask {}
 impl WebGLPaintTask {
     fn new(size: Size2D<i32>) -> Result<WebGLPaintTask, &'static str> {
         // TODO(ecoal95): Get the GLContextAttributes from the `GetContext` call
-        let context = try!(GLContext::create_offscreen(size, GLContextAttributes::default()));
+        let context = try!(GLContext::create_offscreen_with_color_attachment(size,
+                                                                             GLContextAttributes::default(),
+                                                                             ColorAttachmentType::TextureWithSurface));
         Ok(WebGLPaintTask {
             size: size,
             original_context_size: size,
@@ -76,7 +79,10 @@ impl WebGLPaintTask {
                     CanvasMsg::Common(message) => {
                         match message {
                             CanvasCommonMsg::Close => break,
-                            CanvasCommonMsg::SendPixelContents(chan) => painter.send_pixel_contents(chan),
+                            CanvasCommonMsg::SendPixelContents(chan) =>
+                                painter.send_pixel_contents(chan),
+                            CanvasCommonMsg::SendNativeSurface(chan) =>
+                                painter.send_native_surface(chan),
                             // TODO(ecoal95): handle error nicely
                             CanvasCommonMsg::Recreate(size) => painter.recreate(size).unwrap(),
                         }
@@ -184,6 +190,12 @@ impl WebGLPaintTask {
         chan.send(pixels).unwrap();
     }
 
+    fn send_native_surface(&self, _: Sender<NativeSurface>) {
+        // FIXME(ecoal95): We need to make a clone of the surface in order to
+        // implement this
+        unimplemented!()
+    }
+
     fn shader_source(&self, shader_id: u32, source_lines: Vec<String>) {
         let mut lines: Vec<&[u8]> = source_lines.iter().map(|line| line.as_bytes()).collect();
         gl::shader_source(shader_id, &mut lines);
diff --git a/components/canvas_traits/Cargo.toml b/components/canvas_traits/Cargo.toml
new file mode 100644
index 00000000000..8b9a0a518e8
--- /dev/null
+++ b/components/canvas_traits/Cargo.toml
@@ -0,0 +1,23 @@
+[package]
+name = "canvas_traits"
+version = "0.0.1"
+authors = ["The Servo Project Developers"]
+
+[lib]
+name = "canvas_traits"
+path = "lib.rs"
+
+[dependencies.gfx_traits]
+path = "../gfx_traits"
+
+[dependencies.geom]
+git = "https://github.com/servo/rust-geom"
+
+[dependencies.azure]
+git = "https://github.com/servo/rust-azure"
+
+[dependencies.layers]
+git = "https://github.com/servo/rust-layers"
+
+[dependencies]
+cssparser = "0.3.1"
diff --git a/components/canvas_traits/lib.rs b/components/canvas_traits/lib.rs
new file mode 100644
index 00000000000..611274ef48a
--- /dev/null
+++ b/components/canvas_traits/lib.rs
@@ -0,0 +1,433 @@
+/* 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/. */
+
+#![crate_name = "canvas_traits"]
+#![crate_type = "rlib"]
+extern crate azure;
+extern crate geom;
+extern crate cssparser;
+extern crate gfx_traits;
+extern crate layers;
+
+use azure::azure::AzFloat;
+use azure::azure_hl::{DrawTarget, Pattern, ColorPattern};
+use azure::azure_hl::{GradientStop, LinearGradientPattern, RadialGradientPattern, ExtendMode};
+use azure::azure_hl::{JoinStyle, CapStyle, CompositionOp};
+use cssparser::RGBA;
+use geom::matrix2d::Matrix2D;
+use geom::point::Point2D;
+use geom::rect::Rect;
+use geom::size::Size2D;
+use gfx_traits::color;
+use std::sync::mpsc::{Sender};
+use layers::platform::surface::NativeSurface;
+
+#[derive(Clone)]
+pub enum CanvasMsg {
+    Canvas2d(Canvas2dMsg),
+    Common(CanvasCommonMsg),
+    WebGL(CanvasWebGLMsg),
+}
+
+#[derive(Clone)]
+pub enum Canvas2dMsg {
+    Arc(Point2D<f32>, f32, f32, f32, bool),
+    ArcTo(Point2D<f32>, Point2D<f32>, f32),
+    DrawImage(Vec<u8>, Size2D<f64>, Rect<f64>, Rect<f64>, bool),
+    DrawImageSelf(Size2D<f64>, Rect<f64>, Rect<f64>, bool),
+    BeginPath,
+    BezierCurveTo(Point2D<f32>, Point2D<f32>, Point2D<f32>),
+    ClearRect(Rect<f32>),
+    Clip,
+    ClosePath,
+    Fill,
+    FillRect(Rect<f32>),
+    GetImageData(Rect<f64>, Size2D<f64>, Sender<Vec<u8>>),
+    LineTo(Point2D<f32>),
+    MoveTo(Point2D<f32>),
+    PutImageData(Vec<u8>, Rect<f64>, Option<Rect<f64>>),
+    QuadraticCurveTo(Point2D<f32>, Point2D<f32>),
+    Rect(Rect<f32>),
+    RestoreContext,
+    SaveContext,
+    StrokeRect(Rect<f32>),
+    Stroke,
+    SetFillStyle(FillOrStrokeStyle),
+    SetStrokeStyle(FillOrStrokeStyle),
+    SetLineWidth(f32),
+    SetLineCap(LineCapStyle),
+    SetLineJoin(LineJoinStyle),
+    SetMiterLimit(f32),
+    SetGlobalAlpha(f32),
+    SetGlobalComposition(CompositionOrBlending),
+    SetTransform(Matrix2D<f32>),
+}
+
+#[derive(Clone)]
+pub enum CanvasWebGLMsg {
+    AttachShader(u32, u32),
+    BindBuffer(u32, u32),
+    BufferData(u32, Vec<f32>, u32),
+    Clear(u32),
+    ClearColor(f32, f32, f32, f32),
+    CompileShader(u32),
+    CreateBuffer(Sender<u32>),
+    CreateProgram(Sender<u32>),
+    CreateShader(u32, Sender<u32>),
+    DrawArrays(u32, i32, i32),
+    EnableVertexAttribArray(u32),
+    GetAttribLocation(u32, String, Sender<i32>),
+    GetShaderInfoLog(u32, Sender<String>),
+    GetShaderParameter(u32, u32, Sender<i32>),
+    GetUniformLocation(u32, String, Sender<u32>),
+    LinkProgram(u32),
+    ShaderSource(u32, Vec<String>),
+    Uniform4fv(u32, Vec<f32>),
+    UseProgram(u32),
+    VertexAttribPointer2f(u32, i32, bool, i32, i64),
+    Viewport(i32, i32, i32, i32),
+}
+
+#[derive(Clone)]
+pub enum CanvasCommonMsg {
+    Close,
+    Recreate(Size2D<i32>),
+    SendPixelContents(Sender<Vec<u8>>),
+    SendNativeSurface(Sender<NativeSurface>),
+}
+
+
+#[derive(Clone)]
+pub struct CanvasGradientStop {
+    pub offset: f64,
+    pub color: RGBA,
+}
+
+#[derive(Clone)]
+pub struct LinearGradientStyle {
+    pub x0: f64,
+    pub y0: f64,
+    pub x1: f64,
+    pub y1: f64,
+    pub stops: Vec<CanvasGradientStop>
+}
+
+impl LinearGradientStyle {
+    pub fn new(x0: f64, y0: f64, x1: f64, y1: f64, stops: Vec<CanvasGradientStop>)
+        -> LinearGradientStyle {
+        LinearGradientStyle {
+            x0: x0,
+            y0: y0,
+            x1: x1,
+            y1: y1,
+            stops: stops,
+        }
+    }
+}
+
+#[derive(Clone)]
+pub struct RadialGradientStyle {
+    pub x0: f64,
+    pub y0: f64,
+    pub r0: f64,
+    pub x1: f64,
+    pub y1: f64,
+    pub r1: f64,
+    pub stops: Vec<CanvasGradientStop>
+}
+
+impl RadialGradientStyle {
+    pub fn new(x0: f64, y0: f64, r0: f64, x1: f64, y1: f64, r1: f64, stops: Vec<CanvasGradientStop>)
+        -> RadialGradientStyle {
+        RadialGradientStyle {
+            x0: x0,
+            y0: y0,
+            r0: r0,
+            x1: x1,
+            y1: y1,
+            r1: r1,
+            stops: stops,
+        }
+    }
+}
+
+#[derive(Clone)]
+pub enum FillOrStrokeStyle {
+    Color(RGBA),
+    LinearGradient(LinearGradientStyle),
+    RadialGradient(RadialGradientStyle),
+}
+
+impl FillOrStrokeStyle {
+    pub fn to_azure_pattern(&self, drawtarget: &DrawTarget) -> Pattern {
+        match *self {
+            FillOrStrokeStyle::Color(ref color) => {
+                Pattern::Color(ColorPattern::new(color::new(color.red,
+                                                            color.green,
+                                                            color.blue,
+                                                            color.alpha)))
+            },
+            FillOrStrokeStyle::LinearGradient(ref linear_gradient_style) => {
+                let gradient_stops: Vec<GradientStop> = linear_gradient_style.stops.iter().map(|s| {
+                    GradientStop {
+                        offset: s.offset as AzFloat,
+                        color: color::new(s.color.red, s.color.green, s.color.blue, s.color.alpha)
+                    }
+                }).collect();
+
+                Pattern::LinearGradient(LinearGradientPattern::new(
+                    &Point2D(linear_gradient_style.x0 as AzFloat, linear_gradient_style.y0 as AzFloat),
+                    &Point2D(linear_gradient_style.x1 as AzFloat, linear_gradient_style.y1 as AzFloat),
+                    drawtarget.create_gradient_stops(&gradient_stops, ExtendMode::Clamp),
+                    &Matrix2D::identity()))
+            },
+            FillOrStrokeStyle::RadialGradient(ref radial_gradient_style) => {
+                let gradient_stops: Vec<GradientStop> = radial_gradient_style.stops.iter().map(|s| {
+                    GradientStop {
+                        offset: s.offset as AzFloat,
+                        color: color::new(s.color.red, s.color.green, s.color.blue, s.color.alpha)
+                    }
+                }).collect();
+
+                Pattern::RadialGradient(RadialGradientPattern::new(
+                    &Point2D(radial_gradient_style.x0 as AzFloat, radial_gradient_style.y0 as AzFloat),
+                    &Point2D(radial_gradient_style.x1 as AzFloat, radial_gradient_style.y1 as AzFloat),
+                    radial_gradient_style.r0 as AzFloat, radial_gradient_style.r1 as AzFloat,
+                    drawtarget.create_gradient_stops(&gradient_stops, ExtendMode::Clamp),
+                    &Matrix2D::identity()))
+            }
+        }
+    }
+}
+
+#[derive(Copy, Clone, PartialEq)]
+pub enum LineCapStyle {
+    Butt = 0,
+    Round = 1,
+    Square = 2,
+}
+
+impl LineCapStyle {
+    pub fn to_azure_style(&self) -> CapStyle {
+        match *self {
+            LineCapStyle::Butt => CapStyle::Butt,
+            LineCapStyle::Round => CapStyle::Round,
+            LineCapStyle::Square => CapStyle::Square,
+        }
+    }
+
+    pub fn from_str(string: &str) -> Option<LineCapStyle> {
+        match string {
+            "butt" => Some(LineCapStyle::Butt),
+            "round" => Some(LineCapStyle::Round),
+            "square" => Some(LineCapStyle::Square),
+            _ => None
+        }
+    }
+}
+
+#[derive(Copy, Clone, PartialEq)]
+pub enum LineJoinStyle {
+    Round = 0,
+    Bevel = 1,
+    Miter = 2,
+}
+
+impl LineJoinStyle {
+    pub fn to_azure_style(&self) -> JoinStyle {
+        match *self {
+            LineJoinStyle::Round => JoinStyle::Round,
+            LineJoinStyle::Bevel => JoinStyle::Bevel,
+            LineJoinStyle::Miter => JoinStyle::Miter,
+        }
+    }
+
+    pub fn from_str(string: &str) -> Option<LineJoinStyle> {
+        match string {
+            "round" => Some(LineJoinStyle::Round),
+            "bevel" => Some(LineJoinStyle::Bevel),
+            "miter" => Some(LineJoinStyle::Miter),
+            _ => None
+        }
+    }
+}
+
+#[derive(Copy, Clone, PartialEq)]
+pub enum CompositionStyle {
+    SrcIn,
+    SrcOut,
+    SrcOver,
+    SrcAtop,
+    DestIn,
+    DestOut,
+    DestOver,
+    DestAtop,
+    Copy,
+    Lighter,
+    Xor,
+}
+
+impl CompositionStyle {
+    pub fn to_azure_style(&self) -> CompositionOp {
+        match *self {
+            CompositionStyle::SrcIn    => CompositionOp::In,
+            CompositionStyle::SrcOut   => CompositionOp::Out,
+            CompositionStyle::SrcOver  => CompositionOp::Over,
+            CompositionStyle::SrcAtop  => CompositionOp::Atop,
+            CompositionStyle::DestIn   => CompositionOp::DestIn,
+            CompositionStyle::DestOut  => CompositionOp::DestOut,
+            CompositionStyle::DestOver => CompositionOp::DestOver,
+            CompositionStyle::DestAtop => CompositionOp::DestAtop,
+            CompositionStyle::Copy     => CompositionOp::Source,
+            CompositionStyle::Lighter  => CompositionOp::Add,
+            CompositionStyle::Xor      => CompositionOp::Xor,
+        }
+    }
+
+    pub fn from_str(string: &str) -> Option<CompositionStyle> {
+        match string {
+            "source-in"        => Some(CompositionStyle::SrcIn),
+            "source-out"       => Some(CompositionStyle::SrcOut),
+            "source-over"      => Some(CompositionStyle::SrcOver),
+            "source-atop"      => Some(CompositionStyle::SrcAtop),
+            "destination-in"   => Some(CompositionStyle::DestIn),
+            "destination-out"  => Some(CompositionStyle::DestOut),
+            "destination-over" => Some(CompositionStyle::DestOver),
+            "destination-atop" => Some(CompositionStyle::DestAtop),
+            "copy"             => Some(CompositionStyle::Copy),
+            "lighter"          => Some(CompositionStyle::Lighter),
+            "xor"              => Some(CompositionStyle::Xor),
+            _ => None
+        }
+    }
+
+    pub fn to_str(&self) -> &str {
+        match *self {
+            CompositionStyle::SrcIn    => "source-in",
+            CompositionStyle::SrcOut   => "source-out",
+            CompositionStyle::SrcOver  => "source-over",
+            CompositionStyle::SrcAtop  => "source-atop",
+            CompositionStyle::DestIn   => "destination-in",
+            CompositionStyle::DestOut  => "destination-out",
+            CompositionStyle::DestOver => "destination-over",
+            CompositionStyle::DestAtop => "destination-atop",
+            CompositionStyle::Copy     => "copy",
+            CompositionStyle::Lighter  => "lighter",
+            CompositionStyle::Xor      => "xor",
+        }
+    }
+}
+
+#[derive(Copy, Clone, PartialEq)]
+pub enum BlendingStyle {
+    Multiply,
+    Screen,
+    Overlay,
+    Darken,
+    Lighten,
+    ColorDodge,
+    ColorBurn,
+    HardLight,
+    SoftLight,
+    Difference,
+    Exclusion,
+    Hue,
+    Saturation,
+    Color,
+    Luminosity,
+}
+
+impl BlendingStyle {
+    pub fn to_azure_style(&self) -> CompositionOp {
+        match *self {
+            BlendingStyle::Multiply   => CompositionOp::Multiply,
+            BlendingStyle::Screen     => CompositionOp::Screen,
+            BlendingStyle::Overlay    => CompositionOp::Overlay,
+            BlendingStyle::Darken     => CompositionOp::Darken,
+            BlendingStyle::Lighten    => CompositionOp::Lighten,
+            BlendingStyle::ColorDodge => CompositionOp::ColorDodge,
+            BlendingStyle::ColorBurn  => CompositionOp::ColorBurn,
+            BlendingStyle::HardLight  => CompositionOp::HardLight,
+            BlendingStyle::SoftLight  => CompositionOp::SoftLight,
+            BlendingStyle::Difference => CompositionOp::Difference,
+            BlendingStyle::Exclusion  => CompositionOp::Exclusion,
+            BlendingStyle::Hue        => CompositionOp::Hue,
+            BlendingStyle::Saturation => CompositionOp::Saturation,
+            BlendingStyle::Color      => CompositionOp::Color,
+            BlendingStyle::Luminosity => CompositionOp::Luminosity,
+        }
+    }
+
+    pub fn from_str(string: &str) -> Option<BlendingStyle> {
+        match string {
+            "multiply"    => Some(BlendingStyle::Multiply),
+            "screen"      => Some(BlendingStyle::Screen),
+            "overlay"     => Some(BlendingStyle::Overlay),
+            "darken"      => Some(BlendingStyle::Darken),
+            "lighten"     => Some(BlendingStyle::Lighten),
+            "color-dodge" => Some(BlendingStyle::ColorDodge),
+            "color-burn"  => Some(BlendingStyle::ColorBurn),
+            "hard-light"  => Some(BlendingStyle::HardLight),
+            "soft-light"  => Some(BlendingStyle::SoftLight),
+            "difference"  => Some(BlendingStyle::Difference),
+            "exclusion"   => Some(BlendingStyle::Exclusion),
+            "hue"         => Some(BlendingStyle::Hue),
+            "saturation"  => Some(BlendingStyle::Saturation),
+            "color"       => Some(BlendingStyle::Color),
+            "luminosity"  => Some(BlendingStyle::Luminosity),
+            _ => None
+        }
+    }
+
+    pub fn to_str(&self) -> &str {
+        match *self {
+            BlendingStyle::Multiply   => "multiply",
+            BlendingStyle::Screen     => "screen",
+            BlendingStyle::Overlay    => "overlay",
+            BlendingStyle::Darken     => "darken",
+            BlendingStyle::Lighten    => "lighten",
+            BlendingStyle::ColorDodge => "color-dodge",
+            BlendingStyle::ColorBurn  => "color-burn",
+            BlendingStyle::HardLight  => "hard-light",
+            BlendingStyle::SoftLight  => "soft-light",
+            BlendingStyle::Difference => "difference",
+            BlendingStyle::Exclusion  => "exclusion",
+            BlendingStyle::Hue        => "hue",
+            BlendingStyle::Saturation => "saturation",
+            BlendingStyle::Color      => "color",
+            BlendingStyle::Luminosity => "luminosity",
+        }
+    }
+}
+
+#[derive(Copy, Clone, PartialEq)]
+pub enum CompositionOrBlending {
+    Composition(CompositionStyle),
+    Blending(BlendingStyle),
+}
+
+impl CompositionOrBlending {
+    pub fn to_azure_style(&self) -> CompositionOp {
+        match *self {
+            CompositionOrBlending::Composition(op) => op.to_azure_style(),
+            CompositionOrBlending::Blending(op) => op.to_azure_style(),
+        }
+    }
+
+    pub fn default() -> CompositionOrBlending {
+        CompositionOrBlending::Composition(CompositionStyle::SrcOver)
+    }
+
+    pub fn from_str(string: &str) -> Option<CompositionOrBlending> {
+        if let Some(op) = CompositionStyle::from_str(string) {
+            return Some(CompositionOrBlending::Composition(op));
+        }
+
+        if let Some(op) = BlendingStyle::from_str(string) {
+            return Some(CompositionOrBlending::Blending(op));
+        }
+
+        None
+    }
+}
diff --git a/components/compositing/Cargo.toml b/components/compositing/Cargo.toml
index a16df45f0ed..54be36997f9 100644
--- a/components/compositing/Cargo.toml
+++ b/components/compositing/Cargo.toml
@@ -10,6 +10,9 @@ path = "lib.rs"
 [dependencies.gfx]
 path = "../gfx"
 
+[dependencies.gfx_traits]
+path = "../gfx_traits"
+
 [dependencies.layout_traits]
 path = "../layout_traits"
 
diff --git a/components/compositing/compositor.rs b/components/compositing/compositor.rs
index cd2c66e84b8..6f3d24087a8 100644
--- a/components/compositing/compositor.rs
+++ b/components/compositing/compositor.rs
@@ -15,7 +15,7 @@ use geom::point::{Point2D, TypedPoint2D};
 use geom::rect::{Rect, TypedRect};
 use geom::scale_factor::ScaleFactor;
 use geom::size::{Size2D, TypedSize2D};
-use gfx::color;
+use gfx_traits::color;
 use gfx::paint_task::Msg as PaintMsg;
 use gfx::paint_task::PaintRequest;
 use gleam::gl::types::{GLint, GLsizei};
diff --git a/components/compositing/lib.rs b/components/compositing/lib.rs
index 4bfdf0fe2a9..db6726bb668 100644
--- a/components/compositing/lib.rs
+++ b/components/compositing/lib.rs
@@ -23,6 +23,7 @@ extern crate net;
 extern crate num;
 extern crate profile_traits;
 extern crate net_traits;
+extern crate gfx_traits;
 extern crate style;
 #[macro_use]
 extern crate util;
diff --git a/components/gfx/Cargo.toml b/components/gfx/Cargo.toml
index 5e26c6a7e0c..d912508a523 100644
--- a/components/gfx/Cargo.toml
+++ b/components/gfx/Cargo.toml
@@ -11,9 +11,15 @@ path = "lib.rs"
 [dependencies.plugins]
 path = "../plugins"
 
+[dependencies.gfx_traits]
+path = "../gfx_traits"
+
 [dependencies.net_traits]
 path = "../net_traits"
 
+[dependencies.canvas_traits]
+path = "../canvas_traits"
+
 [dependencies.util]
 path = "../util"
 
diff --git a/components/gfx/lib.rs b/components/gfx/lib.rs
index 57633303bfb..738174d1390 100644
--- a/components/gfx/lib.rs
+++ b/components/gfx/lib.rs
@@ -38,6 +38,9 @@ extern crate skia;
 extern crate time;
 extern crate url;
 
+extern crate gfx_traits;
+extern crate canvas_traits;
+
 // Eventually we would like the shaper to be pluggable, as many operating systems have their own
 // shapers. For now, however, this is a hard dependency.
 extern crate harfbuzz;
@@ -59,8 +62,6 @@ pub use paint_context::PaintContext;
 // Private painting modules
 mod paint_context;
 
-// Painting
-pub mod color;
 #[path="display_list/mod.rs"]
 pub mod display_list;
 pub mod paint_task;
diff --git a/components/gfx/paint_context.rs b/components/gfx/paint_context.rs
index 24e7f1f7958..490e3ae3f6a 100644
--- a/components/gfx/paint_context.rs
+++ b/components/gfx/paint_context.rs
@@ -4,7 +4,7 @@
 
 //! Painting of display lists using Moz2D/Azure.
 
-use color;
+use gfx_traits::color;
 use display_list::TextOrientation::{SidewaysLeft, SidewaysRight, Upright};
 use display_list::{BLUR_INFLATION_FACTOR, BorderRadii, BoxShadowClipMode, ClippingRegion};
 use display_list::{TextDisplayItem};
diff --git a/components/gfx/paint_task.rs b/components/gfx/paint_task.rs
index 04570f14c80..10f748e7b5c 100644
--- a/components/gfx/paint_task.rs
+++ b/components/gfx/paint_task.rs
@@ -20,6 +20,7 @@ use layers::platform::surface::{NativeGraphicsMetadata, NativePaintingGraphicsCo
 use layers::platform::surface::NativeSurface;
 use layers::layers::{BufferRequest, LayerBuffer, LayerBufferSet};
 use layers;
+use canvas_traits::CanvasMsg;
 use msg::compositor_msg::{Epoch, FrameTreeId, LayerId};
 use msg::compositor_msg::{LayerProperties, PaintListener, ScrollPolicy};
 use msg::constellation_msg::Msg as ConstellationMsg;
@@ -30,8 +31,9 @@ use rand::{self, Rng};
 use skia::SkiaGrGLNativeContextRef;
 use std::borrow::ToOwned;
 use std::mem;
-use std::sync::Arc;
+use std::sync::{Arc, Mutex};
 use std::sync::mpsc::{Receiver, Sender, channel};
+use std::collections::HashMap;
 use util::geometry::{Au, ZERO_POINT};
 use util::opts;
 use util::task::spawn_named_with_send_on_failure;
@@ -69,6 +71,7 @@ pub struct PaintRequest {
 
 pub enum Msg {
     PaintInit(Epoch, Arc<StackingContext>),
+    CanvasLayer(LayerId, Arc<Mutex<Sender<CanvasMsg>>>),
     Paint(Vec<PaintRequest>, FrameTreeId),
     UnusedBuffer(Vec<Box<LayerBuffer>>),
     PaintPermissionGranted,
@@ -125,6 +128,9 @@ pub struct PaintTask<C> {
     /// Tracks the number of buffers that the compositor currently owns. The
     /// PaintTask waits to exit until all buffers are returned.
     used_buffer_count: usize,
+
+    /// A map to track the canvas specific layers
+    canvas_map: HashMap<LayerId, Arc<Mutex<Sender<CanvasMsg>>>>,
 }
 
 // If we implement this as a function, we get borrowck errors from borrowing
@@ -170,6 +176,7 @@ impl<C> PaintTask<C> where C: PaintListener + Send + 'static {
                     buffer_map: BufferMap::new(10000000),
                     worker_threads: worker_threads,
                     used_buffer_count: 0,
+                    canvas_map: HashMap::new()
                 };
 
                 paint_task.start();
@@ -216,6 +223,11 @@ impl<C> PaintTask<C> where C: PaintListener + Send + 'static {
 
                     self.initialize_layers();
                 }
+                // Inserts a new canvas renderer to the layer map
+                Msg::CanvasLayer(layer_id, canvas_renderer) => {
+                    debug!("Renderer received for canvas with layer {:?}", layer_id);
+                    self.canvas_map.insert(layer_id, canvas_renderer);
+                }
                 Msg::Paint(requests, frame_tree_id) => {
                     if !self.paint_permission {
                         debug!("PaintTask: paint ready msg");
diff --git a/components/gfx_traits/Cargo.toml b/components/gfx_traits/Cargo.toml
new file mode 100644
index 00000000000..913e973d163
--- /dev/null
+++ b/components/gfx_traits/Cargo.toml
@@ -0,0 +1,11 @@
+[package]
+name = "gfx_traits"
+version = "0.0.1"
+authors = ["The Servo Project Developers"]
+
+[lib]
+name = "gfx_traits"
+path = "lib.rs"
+
+[dependencies.azure]
+git = "https://github.com/servo/rust-azure"
diff --git a/components/gfx/color.rs b/components/gfx_traits/color.rs
index a128d364432..a128d364432 100644
--- a/components/gfx/color.rs
+++ b/components/gfx_traits/color.rs
diff --git a/components/gfx_traits/lib.rs b/components/gfx_traits/lib.rs
new file mode 100644
index 00000000000..ea77933ce89
--- /dev/null
+++ b/components/gfx_traits/lib.rs
@@ -0,0 +1,9 @@
+/* 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/. */
+
+#![crate_name = "gfx_traits"]
+#![crate_type = "rlib"]
+extern crate azure;
+
+pub mod color;
diff --git a/components/layout/Cargo.toml b/components/layout/Cargo.toml
index fa527f4d5c9..d3ae3fd878a 100644
--- a/components/layout/Cargo.toml
+++ b/components/layout/Cargo.toml
@@ -13,9 +13,15 @@ git = "https://github.com/servo/rust-azure"
 [dependencies.canvas]
 path = "../canvas"
 
+[dependencies.canvas_traits]
+path = "../canvas_traits"
+
 [dependencies.gfx]
 path = "../gfx"
 
+[dependencies.gfx_traits]
+path = "../gfx_traits"
+
 [dependencies.msg]
 path = "../msg"
 
diff --git a/components/layout/context.rs b/components/layout/context.rs
index e83f4453b04..cf909115048 100644
--- a/components/layout/context.rs
+++ b/components/layout/context.rs
@@ -8,11 +8,12 @@
 
 use css::matching::{ApplicableDeclarationsCache, StyleSharingCandidateCache};
 
+use canvas_traits::CanvasMsg;
+use msg::compositor_msg::LayerId;
 use geom::{Rect, Size2D};
 use gfx::display_list::OpaqueNode;
 use gfx::font_cache_task::FontCacheTask;
 use gfx::font_context::FontContext;
-use msg::compositor_msg::LayerId;
 use msg::constellation_msg::ConstellationChan;
 use net_traits::image::base::Image;
 use net_traits::image_cache_task::{ImageCacheChan, ImageCacheTask, ImageState};
@@ -22,7 +23,7 @@ use std::cell::Cell;
 use std::collections::HashMap;
 use std::collections::hash_state::DefaultState;
 use std::ptr;
-use std::sync::Arc;
+use std::sync::{Arc, Mutex};
 use std::sync::mpsc::{channel, Sender};
 use style::selector_matching::Stylist;
 use url::Url;
@@ -103,6 +104,9 @@ pub struct SharedLayoutContext {
     /// sent.
     pub new_animations_sender: Sender<Animation>,
 
+    /// A channel to send canvas renderers to paint task, in order to correctly paint the layers
+    pub canvas_layers_sender: Sender<(LayerId, Option<Arc<Mutex<Sender<CanvasMsg>>>>)>,
+
     /// The visible rects for each layer, as reported to us by the compositor.
     pub visible_rects: Arc<HashMap<LayerId, Rect<Au>, DefaultState<FnvHasher>>>,
 
diff --git a/components/layout/display_list_builder.rs b/components/layout/display_list_builder.rs
index aac8a7c2317..fbbb46b68b9 100644
--- a/components/layout/display_list_builder.rs
+++ b/components/layout/display_list_builder.rs
@@ -12,7 +12,6 @@
 
 use azure::azure_hl::Color;
 use block::BlockFlow;
-use canvas::canvas_msg::{CanvasMsg, CanvasCommonMsg};
 use context::LayoutContext;
 use flow::{self, BaseFlow, Flow, IS_ABSOLUTELY_POSITIONED, NEEDS_LAYER};
 use fragment::{CoordinateSystem, Fragment, IframeFragmentInfo, ImageFragmentInfo};
@@ -23,7 +22,7 @@ use model::{self, MaybeAuto, ToGfxMatrix};
 use table_cell::CollapsedBordersForCell;
 
 use geom::{Matrix2D, Point2D, Rect, Size2D, SideOffsets2D};
-use gfx::color;
+use gfx_traits::color;
 use gfx::display_list::{BLUR_INFLATION_FACTOR, BaseDisplayItem, BorderDisplayItem};
 use gfx::display_list::{BorderRadii, BoxShadowClipMode, BoxShadowDisplayItem, ClippingRegion};
 use gfx::display_list::{DisplayItem, DisplayList, DisplayItemMetadata};
@@ -32,7 +31,7 @@ use gfx::display_list::{GradientStop, ImageDisplayItem, LineDisplayItem};
 use gfx::display_list::{OpaqueNode, SolidColorDisplayItem};
 use gfx::display_list::{StackingContext, TextDisplayItem, TextOrientation};
 use gfx::paint_task::{PaintLayer, THREAD_TINT_COLORS};
-use msg::compositor_msg::ScrollPolicy;
+use msg::compositor_msg::{ScrollPolicy, LayerId};
 use msg::constellation_msg::ConstellationChan;
 use msg::constellation_msg::Msg as ConstellationMsg;
 use png::{self, PixelsByColorType};
@@ -40,7 +39,6 @@ use std::cmp;
 use std::default::Default;
 use std::iter::repeat;
 use std::sync::Arc;
-use std::sync::mpsc::channel;
 use style::computed_values::filter::Filter;
 use style::computed_values::transform::ComputedMatrix;
 use style::computed_values::{background_attachment, background_clip, background_origin, background_repeat, background_size};
@@ -56,6 +54,15 @@ use util::geometry::{Au, ZERO_POINT};
 use util::logical_geometry::{LogicalPoint, LogicalRect, LogicalSize, WritingMode};
 use util::opts;
 
+use canvas_traits::{CanvasMsg, CanvasCommonMsg};
+use std::sync::mpsc::channel;
+
+/// A possible `PaintLayer` for an stacking context
+pub enum StackingContextLayer {
+    Existing(PaintLayer),
+    IfCanvas(LayerId),
+}
+
 /// The results of display list building for a single flow.
 pub enum DisplayListBuildingResult {
     None,
@@ -240,7 +247,8 @@ pub trait FragmentDisplayListBuilding {
     fn create_stacking_context(&self,
                                base_flow: &BaseFlow,
                                display_list: Box<DisplayList>,
-                               layer: Option<Arc<PaintLayer>>)
+                               layout_context: &LayoutContext,
+                               layer: StackingContextLayer)
                                -> Arc<StackingContext>;
 
 }
@@ -1077,11 +1085,11 @@ impl FragmentDisplayListBuilding for Fragment {
                 }
             }
             SpecificFragmentInfo::Canvas(ref canvas_fragment_info) => {
+                // TODO(ecoal95): make the canvas with a renderer use the custom layer
                 let width = canvas_fragment_info.replaced_image_fragment_info
                     .computed_inline_size.map_or(0, |w| w.to_px() as usize);
                 let height = canvas_fragment_info.replaced_image_fragment_info
                     .computed_block_size.map_or(0, |h| h.to_px() as usize);
-
                 let (sender, receiver) = channel::<Vec<u8>>();
                 let canvas_data = match canvas_fragment_info.renderer {
                     Some(ref renderer) =>  {
@@ -1091,12 +1099,11 @@ impl FragmentDisplayListBuilding for Fragment {
                     },
                     None => repeat(0xFFu8).take(width * height * 4).collect(),
                 };
-
-                let canvas_display_item = box ImageDisplayItem {
+                display_list.content.push_back(DisplayItem::ImageClass(box ImageDisplayItem{
                     base: BaseDisplayItem::new(stacking_relative_content_box,
                                                DisplayItemMetadata::new(self.node,
-                                                                            &*self.style,
-                                                                            Cursor::DefaultCursor),
+                                                                        &*self.style,
+                                                                        Cursor::DefaultCursor),
                                                (*clip).clone()),
                     image: Arc::new(png::Image {
                         width: width as u32,
@@ -1105,9 +1112,7 @@ impl FragmentDisplayListBuilding for Fragment {
                     }),
                     stretch_size: stacking_relative_content_box.size,
                     image_rendering: image_rendering::T::Auto,
-                };
-
-                display_list.content.push_back(DisplayItem::ImageClass(canvas_display_item));
+                }));
             }
             SpecificFragmentInfo::UnscannedText(_) => {
                 panic!("Shouldn't see unscanned fragments here.")
@@ -1121,7 +1126,8 @@ impl FragmentDisplayListBuilding for Fragment {
     fn create_stacking_context(&self,
                                base_flow: &BaseFlow,
                                display_list: Box<DisplayList>,
-                               layer: Option<Arc<PaintLayer>>)
+                               layout_context: &LayoutContext,
+                               layer: StackingContextLayer)
                                -> Arc<StackingContext> {
         let border_box = self.stacking_relative_border_box(&base_flow.stacking_relative_position,
                                                                &base_flow.absolute_position_info
@@ -1153,6 +1159,28 @@ impl FragmentDisplayListBuilding for Fragment {
             filters.push(Filter::Opacity(effects.opacity))
         }
 
+        // Ensure every canvas has a layer
+        let layer = match layer {
+            StackingContextLayer::Existing(existing_layer) => Some(existing_layer),
+            StackingContextLayer::IfCanvas(layer_id) => {
+                if let SpecificFragmentInfo::Canvas(_) = self.specific {
+                    Some(PaintLayer::new(layer_id, color::transparent(), ScrollPolicy::Scrollable))
+                } else {
+                    None
+                }
+            }
+        };
+
+        // If it's a canvas we must propagate the layer and the renderer to the paint
+        // task
+        if let SpecificFragmentInfo::Canvas(ref fragment_info) = self.specific {
+            let layer_id = layer.as_ref().unwrap().id;
+            layout_context.shared.canvas_layers_sender
+                .send((layer_id, fragment_info.renderer.clone())).unwrap();
+        }
+
+        let layer = layer.map(|l| Arc::new(l));
+
         Arc::new(StackingContext::new(display_list,
                                       &border_box,
                                       &overflow,
@@ -1419,10 +1447,11 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
                                                background_border_level);
 
         self.base.display_list_building_result = if self.fragment.establishes_stacking_context() {
-            DisplayListBuildingResult::StackingContext(self.fragment.create_stacking_context(
-                    &self.base,
-                    display_list,
-                    None))
+            DisplayListBuildingResult::StackingContext(
+                self.fragment.create_stacking_context(&self.base,
+                                                      display_list,
+                                                      layout_context,
+                                                      StackingContextLayer::IfCanvas(self.layer_id(0))))
         } else {
             match self.fragment.style.get_box().position {
                 position::T::static_ => {}
@@ -1452,10 +1481,11 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
         if !self.will_get_layer() {
             // We didn't need a layer.
             self.base.display_list_building_result =
-                DisplayListBuildingResult::StackingContext(self.fragment.create_stacking_context(
-                        &self.base,
-                        display_list,
-                        None));
+                DisplayListBuildingResult::StackingContext(
+                    self.fragment.create_stacking_context(&self.base,
+                                                          display_list,
+                                                          layout_context,
+                                                          StackingContextLayer::IfCanvas(self.layer_id(0))));
             return
         }
 
@@ -1466,11 +1496,11 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
             ScrollPolicy::Scrollable
         };
 
-        let transparent = color::transparent();
-        let stacking_context = self.fragment.create_stacking_context(
-            &self.base,
-            display_list,
-            Some(Arc::new(PaintLayer::new(self.layer_id(0), transparent, scroll_policy))));
+        let paint_layer = PaintLayer::new(self.layer_id(0), color::transparent(), scroll_policy);
+        let stacking_context = self.fragment.create_stacking_context(&self.base,
+                                                                     display_list,
+                                                                     layout_context,
+                                                                     StackingContextLayer::Existing(paint_layer));
         self.base.display_list_building_result =
             DisplayListBuildingResult::StackingContext(stacking_context)
     }
@@ -1487,7 +1517,10 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
 
         self.base.display_list_building_result = if self.fragment.establishes_stacking_context() {
             DisplayListBuildingResult::StackingContext(
-                self.fragment.create_stacking_context(&self.base, display_list, None))
+                self.fragment.create_stacking_context(&self.base,
+                                                      display_list,
+                                                      layout_context,
+                                                      StackingContextLayer::IfCanvas(self.layer_id(0))))
         } else {
             DisplayListBuildingResult::Normal(display_list)
         }
@@ -1544,6 +1577,7 @@ impl InlineFlowDisplayListBuilding for InlineFlow {
                                         &self.base.stacking_relative_position_of_display_port);
 
             has_stacking_context = fragment.establishes_stacking_context();
+
             match fragment.specific {
                 SpecificFragmentInfo::InlineBlock(ref mut block_flow) => {
                     let block_flow = &mut *block_flow.flow_ref;
@@ -1571,17 +1605,23 @@ impl InlineFlowDisplayListBuilding for InlineFlow {
 
         // FIXME(Savago): fix Fragment::establishes_stacking_context() for absolute positioned item
         // and remove the check for filter presence. Further details on #5812.
-        if has_stacking_context &&
-                !self.fragments.fragments[0].style().get_effects().filter.is_empty() {
-            self.base.display_list_building_result =
-                DisplayListBuildingResult::StackingContext(
-                    self.fragments.fragments[0].create_stacking_context(&self.base,
-                                                                        display_list,
-                                                                        None));
+        has_stacking_context = has_stacking_context && {
+            if let SpecificFragmentInfo::Canvas(_) = self.fragments.fragments[0].specific {
+                true
+            } else {
+                !self.fragments.fragments[0].style().get_effects().filter.is_empty()
+            }
+        };
+
+        self.base.display_list_building_result = if has_stacking_context {
+            DisplayListBuildingResult::StackingContext(
+                self.fragments.fragments[0].create_stacking_context(&self.base,
+                                                                    display_list,
+                                                                    layout_context,
+                                                                    StackingContextLayer::IfCanvas(self.layer_id(0))))
         } else {
-            self.base.display_list_building_result =
-                DisplayListBuildingResult::Normal(display_list);
-        }
+            DisplayListBuildingResult::Normal(display_list)
+        };
 
         if opts::get().validate_display_list_geometry {
             self.base.validate_display_list_geometry();
diff --git a/components/layout/fragment.rs b/components/layout/fragment.rs
index c8d496c04bf..426ea8e60d8 100644
--- a/components/layout/fragment.rs
+++ b/components/layout/fragment.rs
@@ -6,7 +6,7 @@
 
 #![deny(unsafe_code)]
 
-use canvas::canvas_msg::CanvasMsg;
+use canvas_traits::CanvasMsg;
 use css::node_style::StyledNode;
 use context::LayoutContext;
 use floats::ClearType;
@@ -195,9 +195,7 @@ impl SpecificFragmentInfo {
             SpecificFragmentInfo::Iframe(_) => "SpecificFragmentInfo::Iframe",
             SpecificFragmentInfo::Image(_) => "SpecificFragmentInfo::Image",
             SpecificFragmentInfo::InlineAbsolute(_) => "SpecificFragmentInfo::InlineAbsolute",
-            SpecificFragmentInfo::InlineAbsoluteHypothetical(_) => {
-                "SpecificFragmentInfo::InlineAbsoluteHypothetical"
-            }
+            SpecificFragmentInfo::InlineAbsoluteHypothetical(_) => "SpecificFragmentInfo::InlineAbsoluteHypothetical",
             SpecificFragmentInfo::InlineBlock(_) => "SpecificFragmentInfo::InlineBlock",
             SpecificFragmentInfo::ScannedText(_) => "SpecificFragmentInfo::ScannedText",
             SpecificFragmentInfo::Table => "SpecificFragmentInfo::Table",
@@ -1993,6 +1991,13 @@ impl Fragment {
         if self.style().get_effects().transform.is_some() {
             return true
         }
+
+        // Canvas always layerizes, as an special case
+        // FIXME(pcwalton): Don't unconditionally form stacking contexts for each canvas.
+        if let SpecificFragmentInfo::Canvas(_) = self.specific {
+            return true
+        }
+
         match self.style().get_box().position {
             position::T::absolute | position::T::fixed => {
                 // FIXME(pcwalton): This should only establish a new stacking context when
diff --git a/components/layout/layout_task.rs b/components/layout/layout_task.rs
index 702c28f887d..b0ed2bc3c64 100644
--- a/components/layout/layout_task.rs
+++ b/components/layout/layout_task.rs
@@ -24,6 +24,7 @@ use sequential;
 use wrapper::{LayoutNode, TLayoutNode};
 
 use azure::azure::AzColor;
+use canvas_traits::CanvasMsg;
 use encoding::EncodingRef;
 use encoding::all::UTF_8;
 use geom::matrix2d::Matrix2D;
@@ -31,7 +32,7 @@ use geom::point::Point2D;
 use geom::rect::Rect;
 use geom::scale_factor::ScaleFactor;
 use geom::size::Size2D;
-use gfx::color;
+use gfx_traits::color;
 use gfx::display_list::{ClippingRegion, DisplayItemMetadata, DisplayList, OpaqueNode};
 use gfx::display_list::{StackingContext};
 use gfx::font_cache_task::FontCacheTask;
@@ -39,7 +40,7 @@ use gfx::paint_task::Msg as PaintMsg;
 use gfx::paint_task::{PaintChan, PaintLayer};
 use layout_traits::{LayoutControlMsg, LayoutTaskFactory};
 use log;
-use msg::compositor_msg::{Epoch, LayerId, ScrollPolicy};
+use msg::compositor_msg::{Epoch, ScrollPolicy, LayerId};
 use msg::constellation_msg::Msg as ConstellationMsg;
 use msg::constellation_msg::{ConstellationChan, Failure, PipelineExitType, PipelineId};
 use profile_traits::mem::{self, Report, ReportsChan};
@@ -134,7 +135,7 @@ pub struct LayoutTaskData {
     /// sent.
     pub new_animations_sender: Sender<Animation>,
 
-    /// A counter for epoch messages.
+    /// A counter for epoch messages
     epoch: Epoch,
 
     /// The position and size of the visible rect for each layer. We do not build display lists
@@ -195,6 +196,11 @@ pub struct LayoutTask {
     /// Is this the first reflow in this LayoutTask?
     pub first_reflow: Cell<bool>,
 
+    /// To receive a canvas renderer associated to a layer, this message is propagated
+    /// to the paint chan
+    pub canvas_layers_receiver: Receiver<(LayerId, Option<Arc<Mutex<Sender<CanvasMsg>>>>)>,
+    pub canvas_layers_sender: Sender<(LayerId, Option<Arc<Mutex<Sender<CanvasMsg>>>>)>,
+
     /// A mutex to allow for fast, read-only RPC of layout's internal data
     /// structures, while still letting the LayoutTask modify them.
     ///
@@ -310,6 +316,7 @@ impl LayoutTask {
         // Create the channel on which new animations can be sent.
         let (new_animations_sender, new_animations_receiver) = channel();
         let (image_cache_sender, image_cache_receiver) = channel();
+        let (canvas_layers_sender, canvas_layers_receiver) = channel();
 
         LayoutTask {
             id: id,
@@ -329,6 +336,8 @@ impl LayoutTask {
             first_reflow: Cell::new(true),
             image_cache_receiver: image_cache_receiver,
             image_cache_sender: ImageCacheChan(image_cache_sender),
+            canvas_layers_receiver: canvas_layers_receiver,
+            canvas_layers_sender: canvas_layers_sender,
             rw_data: Arc::new(Mutex::new(
                 LayoutTaskData {
                     root_flow: None,
@@ -375,6 +384,7 @@ impl LayoutTask {
             constellation_chan: rw_data.constellation_chan.clone(),
             layout_chan: self.chan.clone(),
             font_cache_task: self.font_cache_task.clone(),
+            canvas_layers_sender: self.canvas_layers_sender.clone(),
             stylist: &*rw_data.stylist,
             url: (*url).clone(),
             reflow_root: reflow_root.map(|node| OpaqueNodeMethods::from_layout_node(node)),
@@ -960,6 +970,14 @@ impl LayoutTask {
             animation::process_new_animations(&mut *rw_data, self.id);
         }
 
+        // Send new canvas renderers to the paint task
+        while let Ok((layer_id, renderer)) = self.canvas_layers_receiver.try_recv() {
+            // Just send if there's an actual renderer
+            if let Some(renderer) = renderer {
+                self.paint_chan.send(PaintMsg::CanvasLayer(layer_id, renderer));
+            }
+        }
+
         // Perform post-style recalculation layout passes.
         self.perform_post_style_recalc_layout_passes(&data.reflow_info,
                                                      &mut rw_data,
diff --git a/components/layout/lib.rs b/components/layout/lib.rs
index b394c5db88a..ec4bcbe0a85 100644
--- a/components/layout/lib.rs
+++ b/components/layout/lib.rs
@@ -39,13 +39,14 @@ extern crate util;
 extern crate rustc_serialize;
 extern crate alloc;
 extern crate azure;
-extern crate canvas;
+extern crate canvas_traits;
 extern crate clock_ticks;
 extern crate collections;
 extern crate cssparser;
 extern crate encoding;
 extern crate geom;
 extern crate gfx;
+extern crate gfx_traits;
 extern crate layout_traits;
 extern crate libc;
 extern crate msg;
diff --git a/components/layout/wrapper.rs b/components/layout/wrapper.rs
index 256aca623e0..cf65ec3c6c0 100644
--- a/components/layout/wrapper.rs
+++ b/components/layout/wrapper.rs
@@ -32,7 +32,7 @@
 
 #![allow(unsafe_code)]
 
-use canvas::canvas_msg::CanvasMsg;
+use canvas_traits::CanvasMsg;
 use context::SharedLayoutContext;
 use css::node_style::StyledNode;
 use incremental::RestyleDamage;
diff --git a/components/msg/Cargo.toml b/components/msg/Cargo.toml
index af1da0b3b7c..fa70fe5463e 100644
--- a/components/msg/Cargo.toml
+++ b/components/msg/Cargo.toml
@@ -1,5 +1,4 @@
 [package]
-
 name = "msg"
 version = "0.0.1"
 authors = ["The Servo Project Developers"]
diff --git a/components/script/Cargo.toml b/components/script/Cargo.toml
index 5db6d535d75..54f83eb9cfc 100644
--- a/components/script/Cargo.toml
+++ b/components/script/Cargo.toml
@@ -42,6 +42,9 @@ path = "../gfx"
 [dependencies.canvas]
 path = "../canvas"
 
+[dependencies.canvas_traits]
+path = "../canvas_traits"
+
 [dependencies.webdriver_traits]
 path = "../webdriver_traits"
 
diff --git a/components/script/dom/bindings/trace.rs b/components/script/dom/bindings/trace.rs
index d3da922c640..9b7d83c2c26 100644
--- a/components/script/dom/bindings/trace.rs
+++ b/components/script/dom/bindings/trace.rs
@@ -34,8 +34,8 @@ use dom::bindings::refcounted::Trusted;
 use dom::bindings::utils::{Reflectable, Reflector, WindowProxyHandler};
 use script_task::ScriptChan;
 
-use canvas::canvas_paint_task::{CanvasGradientStop, LinearGradientStyle, RadialGradientStyle};
-use canvas::canvas_paint_task::{LineCapStyle, LineJoinStyle, CompositionOrBlending};
+use canvas_traits::{CanvasGradientStop, LinearGradientStyle, RadialGradientStyle};
+use canvas_traits::{LineCapStyle, LineJoinStyle, CompositionOrBlending};
 use cssparser::RGBA;
 use encoding::types::EncodingRef;
 use geom::matrix2d::Matrix2D;
diff --git a/components/script/dom/canvasgradient.rs b/components/script/dom/canvasgradient.rs
index eec31c3fc79..b0a7ea924da 100644
--- a/components/script/dom/canvasgradient.rs
+++ b/components/script/dom/canvasgradient.rs
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 use cssparser::RGBA;
-use canvas::canvas_paint_task::{CanvasGradientStop, FillOrStrokeStyle, LinearGradientStyle, RadialGradientStyle};
+use canvas_traits::{CanvasGradientStop, FillOrStrokeStyle, LinearGradientStyle, RadialGradientStyle};
 use dom::bindings::cell::DOMRefCell;
 use dom::bindings::codegen::Bindings::CanvasGradientBinding;
 use dom::bindings::codegen::Bindings::CanvasGradientBinding::CanvasGradientMethods;
diff --git a/components/script/dom/canvasrenderingcontext2d.rs b/components/script/dom/canvasrenderingcontext2d.rs
index 6353479b116..147c8646e2e 100644
--- a/components/script/dom/canvasrenderingcontext2d.rs
+++ b/components/script/dom/canvasrenderingcontext2d.rs
@@ -28,10 +28,10 @@ use geom::point::Point2D;
 use geom::rect::Rect;
 use geom::size::Size2D;
 
-use canvas::canvas_msg::{CanvasMsg, Canvas2dMsg, CanvasCommonMsg};
-use canvas::canvas_paint_task::{CanvasPaintTask, FillOrStrokeStyle};
-use canvas::canvas_paint_task::{LinearGradientStyle, RadialGradientStyle};
-use canvas::canvas_paint_task::{LineCapStyle, LineJoinStyle, CompositionOrBlending};
+use canvas_traits::{CanvasMsg, Canvas2dMsg, CanvasCommonMsg};
+use canvas_traits::{FillOrStrokeStyle, LinearGradientStyle, RadialGradientStyle};
+use canvas_traits::{LineCapStyle, LineJoinStyle, CompositionOrBlending};
+use canvas::canvas_paint_task::CanvasPaintTask;
 
 use net_traits::image::base::Image;
 use net_traits::image_cache_task::ImageCacheChan;
diff --git a/components/script/dom/htmlcanvaselement.rs b/components/script/dom/htmlcanvaselement.rs
index 47431248294..5d3b01427bf 100644
--- a/components/script/dom/htmlcanvaselement.rs
+++ b/components/script/dom/htmlcanvaselement.rs
@@ -2,7 +2,7 @@
  * 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 canvas::canvas_msg::CanvasMsg;
+use canvas_traits::CanvasMsg;
 use dom::attr::Attr;
 use dom::attr::AttrHelpers;
 use dom::bindings::codegen::Bindings::HTMLCanvasElementBinding;
diff --git a/components/script/dom/webglrenderingcontext.rs b/components/script/dom/webglrenderingcontext.rs
index 82dfc614f52..939225caa66 100644
--- a/components/script/dom/webglrenderingcontext.rs
+++ b/components/script/dom/webglrenderingcontext.rs
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 use canvas::webgl_paint_task::WebGLPaintTask;
-use canvas::canvas_msg::{CanvasMsg, CanvasWebGLMsg, CanvasCommonMsg};
+use canvas_traits::{CanvasMsg, CanvasWebGLMsg, CanvasCommonMsg};
 use dom::bindings::codegen::Bindings::WebGLRenderingContextBinding;
 use dom::bindings::codegen::Bindings::WebGLRenderingContextBinding::{ WebGLRenderingContextMethods, WebGLRenderingContextConstants};
 use dom::bindings::global::{GlobalRef, GlobalField};
diff --git a/components/script/lib.rs b/components/script/lib.rs
index 403d53fccbe..290c0793cb0 100644
--- a/components/script/lib.rs
+++ b/components/script/lib.rs
@@ -40,6 +40,7 @@ extern crate png;
 extern crate rustc_serialize;
 extern crate time;
 extern crate canvas;
+extern crate canvas_traits;
 extern crate profile_traits;
 extern crate script_traits;
 extern crate selectors;
diff --git a/components/servo/Cargo.lock b/components/servo/Cargo.lock
index f2184517738..8f9c9cc9db5 100644
--- a/components/servo/Cargo.lock
+++ b/components/servo/Cargo.lock
@@ -69,16 +69,29 @@ name = "canvas"
 version = "0.0.1"
 dependencies = [
  "azure 0.1.0 (git+https://github.com/servo/rust-azure)",
+ "canvas_traits 0.0.1",
  "cssparser 0.3.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "geom 0.1.0 (git+https://github.com/servo/rust-geom)",
- "gfx 0.0.1",
+ "gfx_traits 0.0.1",
  "gleam 0.0.1 (git+https://github.com/servo/gleam)",
+ "layers 0.1.0 (git+https://github.com/servo/rust-layers)",
  "num 0.1.24 (registry+https://github.com/rust-lang/crates.io-index)",
  "offscreen_gl_context 0.0.1 (git+https://github.com/ecoal95/rust-offscreen-rendering-context)",
  "util 0.0.1",
 ]
 
 [[package]]
+name = "canvas_traits"
+version = "0.0.1"
+dependencies = [
+ "azure 0.1.0 (git+https://github.com/servo/rust-azure)",
+ "cssparser 0.3.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "geom 0.1.0 (git+https://github.com/servo/rust-geom)",
+ "gfx_traits 0.0.1",
+ "layers 0.1.0 (git+https://github.com/servo/rust-layers)",
+]
+
+[[package]]
 name = "cgl"
 version = "0.0.1"
 source = "git+https://github.com/servo/rust-cgl#851ca1b90081d221c3c38d33548d3e22a19db79f"
@@ -115,6 +128,7 @@ dependencies = [
  "devtools_traits 0.0.1",
  "geom 0.1.0 (git+https://github.com/servo/rust-geom)",
  "gfx 0.0.1",
+ "gfx_traits 0.0.1",
  "gleam 0.0.1 (git+https://github.com/servo/gleam)",
  "layers 0.1.0 (git+https://github.com/servo/rust-layers)",
  "layout_traits 0.0.1",
@@ -355,12 +369,14 @@ version = "0.0.1"
 dependencies = [
  "azure 0.1.0 (git+https://github.com/servo/rust-azure)",
  "bitflags 0.1.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "canvas_traits 0.0.1",
  "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)",
  "core_text 0.1.0 (git+https://github.com/servo/rust-core-text)",
  "fontconfig 0.1.0 (git+https://github.com/servo/rust-fontconfig)",
  "freetype 0.1.0 (git+https://github.com/servo/rust-freetype)",
  "geom 0.1.0 (git+https://github.com/servo/rust-geom)",
+ "gfx_traits 0.0.1",
  "harfbuzz 0.1.0 (git+https://github.com/servo/rust-harfbuzz)",
  "layers 0.1.0 (git+https://github.com/servo/rust-layers)",
  "libc 0.1.6 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -389,6 +405,13 @@ dependencies = [
 ]
 
 [[package]]
+name = "gfx_traits"
+version = "0.0.1"
+dependencies = [
+ "azure 0.1.0 (git+https://github.com/servo/rust-azure)",
+]
+
+[[package]]
 name = "gl"
 version = "0.0.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -647,11 +670,13 @@ dependencies = [
  "azure 0.1.0 (git+https://github.com/servo/rust-azure)",
  "bitflags 0.1.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "canvas 0.0.1",
+ "canvas_traits 0.0.1",
  "clock_ticks 0.0.5 (git+https://github.com/tomaka/clock_ticks)",
  "cssparser 0.3.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "encoding 0.2.32 (registry+https://github.com/rust-lang/crates.io-index)",
  "geom 0.1.0 (git+https://github.com/servo/rust-geom)",
  "gfx 0.0.1",
+ "gfx_traits 0.0.1",
  "layout_traits 0.0.1",
  "libc 0.1.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "msg 0.0.1",
@@ -853,13 +878,14 @@ dependencies = [
 [[package]]
 name = "offscreen_gl_context"
 version = "0.0.1"
-source = "git+https://github.com/ecoal95/rust-offscreen-rendering-context#c2b3dfd7fe344384e4206672b99c296141f5b4d6"
+source = "git+https://github.com/ecoal95/rust-offscreen-rendering-context#97eacf34b72f69b10130a0de016529e98ee32f04"
 dependencies = [
  "cgl 0.0.1 (git+https://github.com/servo/rust-cgl)",
  "core_foundation 0.1.0 (git+https://github.com/servo/rust-core-foundation)",
  "geom 0.1.0 (git+https://github.com/servo/rust-geom)",
  "gleam 0.0.1 (git+https://github.com/servo/gleam)",
  "glx 0.0.1 (git+https://github.com/servo/rust-glx)",
+ "layers 0.1.0 (git+https://github.com/servo/rust-layers)",
  "libc 0.1.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "log 0.3.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "xlib 0.1.0 (git+https://github.com/servo/rust-xlib)",
@@ -1021,6 +1047,7 @@ version = "0.0.1"
 dependencies = [
  "bitflags 0.1.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "canvas 0.0.1",
+ "canvas_traits 0.0.1",
  "cssparser 0.3.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "devtools_traits 0.0.1",
  "encoding 0.2.32 (registry+https://github.com/rust-lang/crates.io-index)",