diff --git a/canvas2svg.js b/canvas2svg.js
index 03dc392..2207cda 100644
--- a/canvas2svg.js
+++ b/canvas2svg.js
@@ -212,6 +212,7 @@
     /**
      * The mock canvas context
      * @param o - options include:
+     * ctx - existing Context2D to wrap around
      * width - width of your canvas (defaults to 500)
      * height - height of your canvas (defaults to 500)
      * enableMirroring - enables canvas mirroring (get image data) (defaults to false)
@@ -244,8 +245,15 @@
 
         this.canvas = this;   ///point back to this instance!
         this.__document = options.document || document;
-        this.__canvas = this.__document.createElement("canvas");
-        this.__ctx = this.__canvas.getContext("2d");
+
+        // allow passing in an existing context to wrap around
+        // if a context is passed in, we know a canvas already exist
+        if (options.ctx) {
+            this.__ctx = options.ctx;
+        } else {
+            this.__canvas = this.__document.createElement("canvas");
+            this.__ctx = this.__canvas.getContext("2d");
+        }
 
         this.__setDefaultStyles();
         this.__stack = [this.__getStyleState()];
diff --git a/test/playground_wrapped_Context2D.html b/test/playground_wrapped_Context2D.html
new file mode 100644
index 0000000..d6fa1d8
--- /dev/null
+++ b/test/playground_wrapped_Context2D.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Canvas2Svg Playground</title>
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/skeleton.css">
+    <link rel="stylesheet" href="css/playground.css">
+</head>
+<body>
+<div class="container">
+    <form>
+        <div class="row">
+            <div class="twelve columns">
+                <h5>Select an example</h5>
+            </div>
+        </div>
+    </form>
+    <form>
+        <div class="row">
+            <div class="twelve columns">
+                <!-- select content is generated by the command `gulp update_examples` -->
+                <select id="select" class="u-full-width"><option value="arc">arc</option><option value="arcTo">arcTo</option><option value="arcTo2">arcTo2</option><option value="emptyArc">emptyArc</option><option value="fillstyle">fillstyle</option><option value="globalalpha">globalalpha</option><option value="gradient">gradient</option><option value="linecap">linecap</option><option value="linewidth">linewidth</option><option value="setLineDash">setLineDash</option><option value="rgba">rgba</option><option value="saveandrestore">saveandrestore</option><option value="text">text</option><option value="tiger">tiger</option></select>
+            </div>
+        </div>
+    </form>
+    <div class="row">
+        <div class="six columns">
+            <h5>Canvas</h5>
+        </div>
+        <div class="six columns">
+            <h5>SVG</h5>
+        </div>
+    </div>
+    <div class="row">
+        <div class="six columns">
+            <canvas id="canvas" width="460" height="460"></canvas>
+        </div>
+        <div class="six columns" id="svg">
+        	<canvas id="wrapped_canvas" width="460" height="460" style="display:none"></canvas>
+        </div>
+    </div>
+    <br>
+    <div class="row try">
+        <div class="twelve columns">
+            <h5>Or try your own!</h5>
+        </div>
+    </div>
+    <div class="row">
+        <div class="twelve columns">
+            <textarea id="textarea" class="u-full-width" placeholder="//ctx.fillRect(0,0,100,100);"></textarea>
+        </div>
+    </div>
+    <div class="row">
+        <div class="twelve columns">
+            <a href="#" class="button button-primary u-pull-right" id="render">Render</a>
+        </div>
+    </div>
+</div>
+<!-- jQuery is only used for convenience on this test page, it's not a dependency for the library -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+<script type="text/javascript" src="../canvas2svg.js"></script>
+<script type="text/javascript">
+    window.C2S_EXAMPLES = {};
+</script>
+
+<!-- examples content is generated by the command `gulp update_examples` -->
+<div id="examples"><script type="text/javascript" src="example/arc.js"></script><script type="text/javascript" src="example/arcTo.js"></script><script type="text/javascript" src="example/arcTo2.js"></script><script type="text/javascript" src="example/emptyArc.js"></script><script type="text/javascript" src="example/fillstyle.js"></script><script type="text/javascript" src="example/globalalpha.js"></script><script type="text/javascript" src="example/gradient.js"></script><script type="text/javascript" src="example/linecap.js"></script><script type="text/javascript" src="example/linewidth.js"></script><script type="text/javascript" src="example/setLineDash.js"></script><script type="text/javascript" src="example/rgba.js"></script><script type="text/javascript" src="example/saveandrestore.js"></script><script type="text/javascript" src="example/text.js"></script><script type="text/javascript" src="example/tiger.js"></script></div>
+
+<script type="text/javascript">
+    (function () {
+        "use strict";
+
+        function drawExample (example) {
+            var canvas = document.getElementById('canvas');
+            var ctx = canvas.getContext("2d");
+            ctx.clearRect(0, 0, 500, 500);
+
+            var svg = document.getElementById("svg");
+
+            // remove the latest svg (children[0] is the wrapped canvas element)
+            if (svg.children.length > 1) {
+                svg.removeChild(svg.children[1]);
+            }
+            var otherCanvas = document.getElementById("wrapped_canvas");
+            var wrappedCtx = otherCanvas.getContext("2d");
+            var c2s = new C2S({ctx:wrappedCtx, width:500, height:500});
+
+            example(ctx);
+            example(c2s);
+
+            svg.appendChild(c2s.getSvg());
+        }
+
+        $('#render').on('click', function(event) {
+            event.preventDefault();
+            var text = $("#textarea").val();
+            var drawFunction = new Function("ctx", text);
+            drawExample(drawFunction);
+        });
+
+        $('#select').on('change', function(event) {
+            var example = C2S_EXAMPLES[$(this).val()];
+            drawExample(example);
+        }).trigger('change');
+
+    }());
+</script>
+</body>
+</html>
\ No newline at end of file
