fixes #4 angle diff should be positive by adding 2PI instead of Math.abs

gliffy · Apr 4, 2014 · 20cb914 · 20cb914
1 parent 84ace43
commit 20cb914
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.idea/
diff --git a/canvas2svg.js b/canvas2svg.js
@@ -1,5 +1,5 @@
 /*!!
- *  Canvas 2 Svg v1.0.2
+ *  Canvas 2 Svg v1.0.3
  *  A low level canvas to SVG converter. Uses a mock canvas context to build an SVG document.
  *
  *  Licensed under the MIT license:
@@ -190,7 +190,7 @@
 
     /**
      * The mock canvas context
-     * @param options - options include:
+     * @param o - options include:
      * 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)
@@ -799,11 +799,18 @@
             startX = x+radius*Math.cos(startAngle),
             startY = y+radius*Math.sin(startAngle),
             sweepFlag = counterClockwise ? 0 : 1,
-            largeArcFlag;
+            largeArcFlag = 0,
+            diff = endAngle - startAngle;
+
+        // https://github.com/gliffy/canvas2svg/issues/4
+        if(diff < 0) {
+            diff += 2*Math.PI;
+        }
+
         if(counterClockwise) {
-            largeArcFlag = Math.abs(endAngle - startAngle) > Math.PI ? 0 : 1;
+            largeArcFlag = diff > Math.PI ? 0 : 1;
         } else {
-            largeArcFlag = Math.abs(endAngle - startAngle) > Math.PI ? 1 : 0;
+            largeArcFlag = diff > Math.PI ? 1 : 0;
         }
 
         this.moveTo(startX, startY);

diff --git a/jasmine-tests/canvassvg.html b/jasmine-tests/canvassvg.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Canvas2Svg</title>
+    <script type="text/javascript" src="../canvas2svg.js"></script>
+    <style type="text/css">
+        canvas {
+            float:left;
+        }
+        #svg {
+            width: 500px;
+            height: 500px;
+            float: left;
+        }
+        textarea {
+            width:500px;
+            height:100px;
+        }
+    </style>
+</head>
+<body>
+<div id="container">
+    <canvas id="canvas" width="500" height="500"></canvas>
+    <div id="svg">
+</div>
+<textarea id="textarea">
+</textarea>
+<a href="#" id="render">Render</a>
+</div>
+<script type="text/javascript">
+    (function() {
+        "use strict";
+        document.getElementById("render").addEventListener("click", function(event){
+            event.preventDefault();
+            var ctx = document.getElementById("canvas").getContext("2d");
+            ctx.clearRect(0,0,500,500);
+            var c2s = new C2S(500,500);
+            var text = document.getElementById("textarea").value;
+            var drawFunction = new Function("ctx", text);
+            var svg = document.getElementById("svg");
+
+            drawFunction(ctx);
+            drawFunction(c2s);
+
+            if(svg.children.length>0) {
+                svg.removeChild(svg.children[0]);
+            }
+
+            svg.appendChild(c2s.getSvg());
+        } , false);
+
+
+    }());
+</script>
+</body>
+</html>