diff --git a/.gitignore b/.gitignore
index cdd41e1..cb750e0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,13 @@
 output/
 node_modules/
 bower_components/
+
+# OS generated files #
+######################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
diff --git a/docs/Graphics/Canvas.md b/docs/Graphics/Canvas.md
index 9a96886..fec763e 100644
--- a/docs/Graphics/Canvas.md
+++ b/docs/Graphics/Canvas.md
@@ -43,6 +43,28 @@ data CanvasPixelArray :: *
 
 An array of pixel data.
 
+#### `CanvasImageSource`
+
+``` purescript
+data CanvasImageSource :: *
+```
+
+Opaque object for drawing elements and things to the canvas.
+
+#### `CanvasGradient`
+
+``` purescript
+data CanvasGradient :: *
+```
+
+Opaque object describing a gradient.
+
+#### `canvasElementToImageSource`
+
+``` purescript
+canvasElementToImageSource :: CanvasElement -> CanvasImageSource
+```
+
 #### `getCanvasElementById`
 
 ``` purescript
@@ -633,4 +655,76 @@ getImageDataPixelArray :: forall eff. ImageData -> Eff (canvas :: Canvas | eff)
 
 Get the pixel data array from an image data object.
 
+#### `drawImage`
+
+``` purescript
+drawImage :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Eff (canvas :: Canvas | eff) Context2D
+```
+
+#### `drawImageScale`
+
+``` purescript
+drawImageScale :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Eff (canvas :: Canvas | eff) Context2D
+```
+
+#### `drawImageFull`
+
+``` purescript
+drawImageFull :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Eff (canvas :: Canvas | eff) Context2D
+```
+
+#### `LinearGradient`
+
+``` purescript
+type LinearGradient = { x0 :: Number, y0 :: Number, x1 :: Number, y1 :: Number }
+```
+
+A type representing a linear gradient.
+ -  Starting point coordinates: (`x0`, `y0`)
+ -  Ending point coordinates: (`x1`, `y1`)
+
+#### `createLinearGradient`
+
+``` purescript
+createLinearGradient :: forall eff. LinearGradient -> Context2D -> Eff (canvas :: Canvas | eff) CanvasGradient
+```
+
+Create a linear CanvasGradient.
+
+#### `RadialGradient`
+
+``` purescript
+type RadialGradient = { x0 :: Number, y0 :: Number, r0 :: Number, x1 :: Number, y1 :: Number, r1 :: Number }
+```
+
+A type representing a radial gradient.
+ -  Starting circle center coordinates: (`x0`, `y0`)
+ -  Starting circle radius: `r0`
+ -  Ending circle center coordinates: (`x1`, `y1`)
+ -  Ending circle radius: `r1`
+
+#### `createRadialGradient`
+
+``` purescript
+createRadialGradient :: forall eff. RadialGradient -> Context2D -> Eff (canvas :: Canvas | eff) CanvasGradient
+```
+
+Create a radial CanvasGradient.
+
+#### `addColorStop`
+
+``` purescript
+addColorStop :: forall eff. Number -> String -> CanvasGradient -> Eff (canvas :: Canvas | eff) CanvasGradient
+```
+
+Add a single color stop to a CanvasGradient.
+
+#### `setGradientFillStyle`
+
+``` purescript
+setGradientFillStyle :: forall eff. CanvasGradient -> Context2D -> Eff (canvas :: Canvas | eff) Context2D
+```
+
+Set the Context2D fillstyle to the CanvasGradient.
+
 
diff --git a/src/Graphics/Canvas.js b/src/Graphics/Canvas.js
index f45036a..d7e7d4b 100644
--- a/src/Graphics/Canvas.js
+++ b/src/Graphics/Canvas.js
@@ -504,3 +504,43 @@ exports.drawImageFull = function(ctx) {
         };
     };
 };
+
+exports.createLinearGradient = function(linearGradient) {
+    return function(ctx) {
+        return function() {
+            return ctx.createLinearGradient(linearGradient.x0, linearGradient.y0, linearGradient.x1, linearGradient.y1);
+        };
+    };
+};
+
+exports.createRadialGradient = function(radialGradient) {
+    return function(ctx) {
+        return function() {
+            return ctx.createRadialGradient(radialGradient.x0, radialGradient.y0, radialGradient.r0, radialGradient.x1, radialGradient.y1, radialGradient.r1);
+        };
+    };
+};
+
+exports.addColorStop = function(stop) {
+    return function(color) {
+        return function(gradient) {
+            return function() {
+                gradient.addColorStop(stop, color);
+                return gradient;
+            };
+        };
+    };
+};
+
+exports.setGradientFillStyle = function(gradient) {
+    return function(ctx) {
+        return function() {
+            ctx.fillStyle = gradient;
+            return ctx;
+        };
+    };
+};
+        
+
+
+
diff --git a/src/Graphics/Canvas.purs b/src/Graphics/Canvas.purs
index 840800c..0d87520 100644
--- a/src/Graphics/Canvas.purs
+++ b/src/Graphics/Canvas.purs
@@ -18,6 +18,9 @@ module Graphics.Canvas
   , Transform()
   , TranslateTransform()
   , TextAlign(..)
+  , CanvasGradient()
+  , LinearGradient()
+  , RadialGradient()
 
   , getCanvasElementById
   , getContext2D
@@ -88,6 +91,11 @@ module Graphics.Canvas
   , drawImage
   , drawImageScale
   , drawImageFull
+
+  , createLinearGradient
+  , createRadialGradient
+  , addColorStop
+  , setGradientFillStyle
   ) where
 
 import Prelude
@@ -114,6 +122,9 @@ foreign import data CanvasPixelArray :: *
 -- | Opaque object for drawing elements and things to the canvas.
 foreign import data CanvasImageSource :: *
 
+-- | Opaque object describing a gradient.
+foreign import data CanvasGradient :: *
+
 foreign import canvasElementToImageSource :: CanvasElement -> CanvasImageSource
 
 foreign import getCanvasElementByIdImpl :: 
@@ -462,3 +473,41 @@ foreign import drawImage :: forall eff. Context2D -> CanvasImageSource -> Number
 foreign import drawImageScale :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Eff (canvas :: Canvas | eff) Context2D
 
 foreign import drawImageFull :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Eff (canvas :: Canvas | eff) Context2D
+
+-- | A type representing a linear gradient.
+-- |  -  Starting point coordinates: (`x0`, `y0`)
+-- |  -  Ending point coordinates: (`x1`, `y1`)
+
+type LinearGradient =
+    { x0 :: Number
+    , y0 :: Number
+    , x1 :: Number
+    , y1 :: Number
+    }
+
+-- | Create a linear CanvasGradient.
+foreign import createLinearGradient :: forall eff. LinearGradient -> Context2D -> Eff (canvas :: Canvas | eff) CanvasGradient
+
+-- | A type representing a radial gradient.
+-- |  -  Starting circle center coordinates: (`x0`, `y0`)
+-- |  -  Starting circle radius: `r0`
+-- |  -  Ending circle center coordinates: (`x1`, `y1`)
+-- |  -  Ending circle radius: `r1`
+
+type RadialGradient =
+    { x0 :: Number
+    , y0 :: Number
+    , r0 :: Number
+    , x1 :: Number
+    , y1 :: Number
+    , r1 :: Number
+    }
+
+-- | Create a radial CanvasGradient.
+foreign import createRadialGradient :: forall eff. RadialGradient -> Context2D -> Eff (canvas :: Canvas | eff) CanvasGradient
+
+-- | Add a single color stop to a CanvasGradient.
+foreign import addColorStop :: forall eff. Number -> String -> CanvasGradient -> Eff (canvas :: Canvas | eff) CanvasGradient
+
+-- | Set the Context2D fillstyle to the CanvasGradient.
+foreign import setGradientFillStyle :: forall eff. CanvasGradient -> Context2D -> Eff (canvas :: Canvas | eff) Context2D