<!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">
</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 c2s = new C2S(500, 500);
var svg = document.getElementById("svg");
if (svg.children.length > 0) {
svg.removeChild(svg.children[0]);
}
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>