diff --git a/docs/Graphics/Canvas.md b/docs/Graphics/Canvas.md
index ce41f7c..984a31f 100644
--- a/docs/Graphics/Canvas.md
+++ b/docs/Graphics/Canvas.md
@@ -65,6 +65,12 @@ Opaque object describing a gradient.
 canvasElementToImageSource :: CanvasElement -> CanvasImageSource
 ```
 
+#### `withImage`
+
+``` purescript
+withImage :: forall eff a. String -> (CanvasImageSource -> Eff eff Unit) -> Eff eff Unit
+```
+
 #### `getCanvasElementById`
 
 ``` purescript
diff --git a/src/Graphics/Canvas.js b/src/Graphics/Canvas.js
index 2305bbf..c3f0b70 100644
--- a/src/Graphics/Canvas.js
+++ b/src/Graphics/Canvas.js
@@ -7,6 +7,20 @@ exports.canvasElementToImageSource = function(e) {
     return e;
 };
 
+exports.withImage = function (src) {
+  return function(f) {
+        return function () {
+            var img = new Image();
+            img.src = src;
+            img.addEventListener("load", function() {
+                f(img)();
+            }, false);
+
+            return {};
+        }
+    };
+};
+
 exports.getCanvasElementByIdImpl = function(id, Just, Nothing) {
     return function() {
         var el = document.getElementById(id);
diff --git a/src/Graphics/Canvas.purs b/src/Graphics/Canvas.purs
index def8740..2873a6c 100644
--- a/src/Graphics/Canvas.purs
+++ b/src/Graphics/Canvas.purs
@@ -80,6 +80,7 @@ module Graphics.Canvas
   , restore
   , withContext
 
+  , withImage
   , getImageData
   , getImageDataWidth
   , getImageDataHeight
@@ -132,6 +133,9 @@ foreign import data CanvasGradient :: *
 
 foreign import canvasElementToImageSource :: CanvasElement -> CanvasImageSource
 
+-- | Wrapper for asynchronously loading a image file by path and use it in callback, e.g. drawImage
+foreign import withImage :: forall eff a. String -> (CanvasImageSource -> Eff eff Unit) -> Eff eff Unit
+
 foreign import getCanvasElementByIdImpl :: 
   forall r eff. Fn3 String
                     (CanvasElement -> r)