Skip to content

Commit

Permalink
Give users the option of wrapping an existing Context2D element
Browse files Browse the repository at this point in the history
  • Loading branch information
@LemonPi
LemonPi committed Sep 2, 2016
1 parent 6983b3d commit 648fdbd
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 2 deletions.
12 changes: 10 additions & 2 deletions canvas2svg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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()];
Expand Down
110 changes: 110 additions & 0 deletions test/playground_wrapped_Context2D.html
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 648fdbd

Please sign in to comment.