diff --git a/canvas2svg.js b/canvas2svg.js
index 0964b39..1d790bc 100644
--- a/canvas2svg.js
+++ b/canvas2svg.js
@@ -167,6 +167,12 @@
},
"textBaseline":{
canvas : "alphabetic"
+ },
+ "lineDash" : {
+ svgAttr : "stroke-dasharray",
+ canvas : [],
+ svg : null,
+ apply : "stroke"
}
};
@@ -1038,17 +1044,21 @@
//canvas2svg mock canvas context. In the future we may want to clone nodes instead.
//also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
svg = image.getSvg();
- defs = svg.childNodes[0];
- while(defs.childNodes.length) {
- id = defs.childNodes[0].getAttribute("id");
- this.__ids[id] = id;
- this.__defs.appendChild(defs.childNodes[0]);
+ if (svg.childNodes && svg.childNodes.length > 1) {
+ defs = svg.childNodes[0];
+ while(defs.childNodes.length) {
+ id = defs.childNodes[0].getAttribute("id");
+ this.__ids[id] = id;
+ this.__defs.appendChild(defs.childNodes[0]);
+ }
+ group = svg.childNodes[1];
+ if (group) {
+ parent.appendChild(group);
+ this.__currentElement = group;
+ this.translate(dx, dy);
+ this.__currentElement = currentElement;
+ }
}
- group = svg.childNodes[1];
- parent.appendChild(group);
- this.__currentElement = group;
- this.translate(dx, dy);
- this.__currentElement = currentElement;
} else if(image.nodeName === "CANVAS" || image.nodeName === "IMG") {
//canvas or image
svgImage = this.__createElement("image");
@@ -1098,7 +1108,15 @@
}
return new CanvasPattern(pattern, this);
};
-
+
+ ctx.prototype.setLineDash = function(dashArray) {
+ if (dashArray && dashArray.length > 0) {
+ this.lineDash = dashArray.join(",");
+ } else {
+ this.lineDash = null;
+ }
+ };
+
/**
* Not yet implemented
*/
@@ -1108,7 +1126,7 @@
ctx.prototype.putImageData = function(){};
ctx.prototype.globalCompositeOperation = function(){};
ctx.prototype.setTransform = function(){};
-
+
//add options for alternative namespace
if (typeof window === "object") {
window.C2S = ctx;
diff --git a/test/example/setLineDash.js b/test/example/setLineDash.js
new file mode 100644
index 0000000..7b09cdc
--- /dev/null
+++ b/test/example/setLineDash.js
@@ -0,0 +1,12 @@
+window.C2S_EXAMPLES['setLineDash'] = function(ctx) {
+ ctx.save();
+ ctx.lineWidth = 4;
+ for (var i = 0; i < 10; i++){
+ ctx.setLineDash([(i+1)*5,10]);
+ ctx.beginPath();
+ ctx.moveTo(5+i*14,5);
+ ctx.lineTo(5+i*14,140);
+ ctx.stroke();
+ }
+ ctx.restore();
+};
\ No newline at end of file
diff --git a/test/playground.html b/test/playground.html
index ab1cad2..67cf143 100644
--- a/test/playground.html
+++ b/test/playground.html
@@ -20,7 +20,7 @@
<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="rgba">rgba</option><option value="saveandrestore">saveandrestore</option><option value="text">text</option><option value="tiger">tiger</option></select>
+ <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>
@@ -64,7 +64,7 @@
</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/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>
+<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 () {