evert/svgcanvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #48 from mudcube/master

Browse Source 
Fixes for a few errors being thrown
This commit is contained in:
Tom Kapanka 2017-06-07 16:59:21 -07:00 committed by GitHub
commit 6d09433261
1 changed files with 131 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

248
canvas2svg.js
View File

@ -11,7 +11,7 @@
* Copyright (c) 2014 Gliffy Inc. * Copyright (c) 2014 Gliffy Inc.
*/ */
;(function() { ;(function () {
"use strict"; "use strict";
var STYLES, ctx, CanvasGradient, CanvasPattern, namedEntities; var STYLES, ctx, CanvasGradient, CanvasPattern, namedEntities;
@ -181,7 +181,7 @@
* @param gradientNode - reference to the gradient * @param gradientNode - reference to the gradient
* @constructor * @constructor
*/ */
CanvasGradient = function(gradientNode, ctx) { CanvasGradient = function (gradientNode, ctx) {
this.__root = gradientNode; this.__root = gradientNode;
this.__ctx = ctx; this.__ctx = ctx;
}; };
@ -189,10 +189,10 @@
/** /**
* Adds a color stop to the gradient root * Adds a color stop to the gradient root
*/ */
CanvasGradient.prototype.addColorStop = function(offset, color) { CanvasGradient.prototype.addColorStop = function (offset, color) {
var stop = this.__ctx.__createElement("stop"), regex, matches; var stop = this.__ctx.__createElement("stop"), regex, matches;
stop.setAttribute("offset", offset); stop.setAttribute("offset", offset);
if(color.indexOf("rgba") !== -1) { if (color.indexOf("rgba") !== -1) {
//separate alpha value, since webkit can't handle it //separate alpha value, since webkit can't handle it
regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi; regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
matches = regex.exec(color); matches = regex.exec(color);
@ -204,7 +204,7 @@
this.__root.appendChild(stop); this.__root.appendChild(stop);
}; };
CanvasPattern = function(pattern, ctx) { CanvasPattern = function (pattern, ctx) {
this.__root = pattern; this.__root = pattern;
this.__ctx = ctx; this.__ctx = ctx;
}; };
@ -218,22 +218,21 @@
* enableMirroring - enables canvas mirroring (get image data) (defaults to false) * enableMirroring - enables canvas mirroring (get image data) (defaults to false)
* document - the document object (defaults to the current document) * document - the document object (defaults to the current document)
*/ */
ctx = function(o) { ctx = function (o) {
var defaultOptions = { width:500, height:500, enableMirroring : false}, options; var defaultOptions = { width:500, height:500, enableMirroring : false}, options;
//keep support for this way of calling C2S: new C2S(width,height) //keep support for this way of calling C2S: new C2S(width,height)
if(arguments.length > 1) { if (arguments.length > 1) {
options = defaultOptions; options = defaultOptions;
options.width = arguments[0]; options.width = arguments[0];
options.height = arguments[1]; options.height = arguments[1];
} else if( !o ) { } else if ( !o ) {
options = defaultOptions; options = defaultOptions;
} else { } else {
options = o; options = o;
} }
if(!(this instanceof ctx)) { if (!(this instanceof ctx)) {
//did someone call this without new? //did someone call this without new?
return new ctx(options); return new ctx(options);
} }
@ -291,12 +290,12 @@
var element = this.__document.createElementNS("http://www.w3.org/2000/svg", elementName), var element = this.__document.createElementNS("http://www.w3.org/2000/svg", elementName),
keys = Object.keys(properties), i, key; keys = Object.keys(properties), i, key;
if(resetFill) { if (resetFill) {
//if fill or stroke is not specified, the svg element should not display. By default SVG's fill is black. //if fill or stroke is not specified, the svg element should not display. By default SVG's fill is black.
element.setAttribute("fill", "none"); element.setAttribute("fill", "none");
element.setAttribute("stroke", "none"); element.setAttribute("stroke", "none");
} }
for(i=0; i<keys.length; i++) { for (i=0; i<keys.length; i++) {
key = keys[i]; key = keys[i];
element.setAttribute(key, properties[key]); element.setAttribute(key, properties[key]);
} }
@ -307,10 +306,10 @@
* Applies default canvas styles to the context * Applies default canvas styles to the context
* @private * @private
*/ */
ctx.prototype.__setDefaultStyles = function() { ctx.prototype.__setDefaultStyles = function () {
//default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/ //default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/
var keys = Object.keys(STYLES), i, key; var keys = Object.keys(STYLES), i, key;
for(i=0; i<keys.length; i++) { for (i=0; i<keys.length; i++) {
key = keys[i]; key = keys[i];
this[key] = STYLES[key].canvas; this[key] = STYLES[key].canvas;
} }
@ -321,9 +320,9 @@
* @param styleState * @param styleState
* @private * @private
*/ */
ctx.prototype.__applyStyleState = function(styleState) { ctx.prototype.__applyStyleState = function (styleState) {
var keys = Object.keys(styleState), i, key; var keys = Object.keys(styleState), i, key;
for(i=0; i<keys.length; i++) { for (i=0; i<keys.length; i++) {
key = keys[i]; key = keys[i];
this[key] = styleState[key]; this[key] = styleState[key];
} }
@ -334,9 +333,9 @@
* @return {Object} * @return {Object}
* @private * @private
*/ */
ctx.prototype.__getStyleState = function() { ctx.prototype.__getStyleState = function () {
var i, styleState = {}, keys = Object.keys(STYLES), key; var i, styleState = {}, keys = Object.keys(STYLES), key;
for(i=0; i<keys.length; i++) { for (i=0; i<keys.length; i++) {
key = keys[i]; key = keys[i];
styleState[key] = this[key]; styleState[key] = this[key];
} }
@ -348,16 +347,26 @@
* @param type * @param type
* @private * @private
*/ */
ctx.prototype.__applyStyleToCurrentElement = function(type) { ctx.prototype.__applyStyleToCurrentElement = function (type) {
var currentElement = this.__currentElement;
var currentStyleGroup = this.__currentElementsToStyle;
if (currentStyleGroup) {
currentElement.setAttribute(type, "");
currentElement = currentStyleGroup.element;
currentStyleGroup.children.forEach(function (node) {
node.setAttribute(type, "");
})
}
var keys = Object.keys(STYLES), i, style, value, id, regex, matches; var keys = Object.keys(STYLES), i, style, value, id, regex, matches;
for(i=0; i<keys.length; i++) { for (i = 0; i < keys.length; i++) {
style = STYLES[keys[i]]; style = STYLES[keys[i]];
value = this[keys[i]]; value = this[keys[i]];
if(style.apply) { if (style.apply) {
//is this a gradient or pattern? //is this a gradient or pattern?
if(style.apply.indexOf("fill")!==-1 && value instanceof CanvasPattern) { if (value instanceof CanvasPattern) {
//pattern //pattern
if(value.__ctx) { if (value.__ctx) {
//copy over defs //copy over defs
while(value.__ctx.__defs.childNodes.length) { while(value.__ctx.__defs.childNodes.length) {
id = value.__ctx.__defs.childNodes[0].getAttribute("id"); id = value.__ctx.__defs.childNodes[0].getAttribute("id");
@ -365,51 +374,48 @@
this.__defs.appendChild(value.__ctx.__defs.childNodes[0]); this.__defs.appendChild(value.__ctx.__defs.childNodes[0]);
} }
} }
this.__currentElement.setAttribute("fill", format("url(#{id})", {id:value.__root.getAttribute("id")})); currentElement.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")}));
} }
else if(style.apply.indexOf("fill")!==-1 && value instanceof CanvasGradient) { else if (value instanceof CanvasGradient) {
//gradient //gradient
this.__currentElement.setAttribute("fill", format("url(#{id})", {id:value.__root.getAttribute("id")})); currentElement.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")}));
} else if(style.apply.indexOf(type)!==-1 && style.svg !== value) { } else if (style.apply.indexOf(type)!==-1 && style.svg !== value) {
if((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1) { if ((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1) {
//separate alpha value, since illustrator can't handle it //separate alpha value, since illustrator can't handle it
regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi; regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
matches = regex.exec(value); matches = regex.exec(value);
this.__currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]})); currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
//should take globalAlpha here //should take globalAlpha here
var opacity = matches[4]; var opacity = matches[4];
var globalAlpha = this.globalAlpha; var globalAlpha = this.globalAlpha;
if (globalAlpha != null) { if (globalAlpha != null) {
opacity *= globalAlpha; opacity *= globalAlpha;
} }
this.__currentElement.setAttribute(style.svgAttr+"-opacity", opacity); currentElement.setAttribute(style.svgAttr+"-opacity", opacity);
} else { } else {
var attr = style.svgAttr; var attr = style.svgAttr;
if (keys[i] === 'globalAlpha') { if (keys[i] === 'globalAlpha') {
attr = type+'-'+style.svgAttr; attr = type+'-'+style.svgAttr;
if (this.__currentElement.getAttribute(attr)) { if (currentElement.getAttribute(attr)) {
//fill-opacity or stroke-opacity has already been set by stroke or fill. //fill-opacity or stroke-opacity has already been set by stroke or fill.
continue; continue;
} }
} }
//otherwise only update attribute if right type, and not svg default //otherwise only update attribute if right type, and not svg default
this.__currentElement.setAttribute(attr, value); currentElement.setAttribute(attr, value);
} }
} }
} }
} }
}; };
/** /**
* Will return the closest group or svg node. May return the current element. * Will return the closest group or svg node. May return the current element.
* @private * @private
*/ */
ctx.prototype.__closestGroupOrSvg = function(node) { ctx.prototype.__closestGroupOrSvg = function (node) {
node = node || this.__currentElement; node = node || this.__currentElement;
if(node.nodeName === "g" || node.nodeName === "svg") { if (node.nodeName === "g" || node.nodeName === "svg") {
return node; return node;
} else { } else {
return this.__closestGroupOrSvg(node.parentNode); return this.__closestGroupOrSvg(node.parentNode);
@ -422,24 +428,24 @@
* If true, we attempt to find all named entities and encode it as a numeric entity. * If true, we attempt to find all named entities and encode it as a numeric entity.
* @return serialized svg * @return serialized svg
*/ */
ctx.prototype.getSerializedSvg = function(fixNamedEntities) { ctx.prototype.getSerializedSvg = function (fixNamedEntities) {
var serialized = new XMLSerializer().serializeToString(this.__root), var serialized = new XMLSerializer().serializeToString(this.__root),
keys, i, key, value, regexp, xmlns; keys, i, key, value, regexp, xmlns;
//IE search for a duplicate xmnls because they didn't implement setAttributeNS correctly //IE search for a duplicate xmnls because they didn't implement setAttributeNS correctly
xmlns = /xmlns="http:\/\/www\.w3\.org\/2000\/svg".+xmlns="http:\/\/www\.w3\.org\/2000\/svg/gi; xmlns = /xmlns="http:\/\/www\.w3\.org\/2000\/svg".+xmlns="http:\/\/www\.w3\.org\/2000\/svg/gi;
if(xmlns.test(serialized)) { if (xmlns.test(serialized)) {
serialized = serialized.replace('xmlns="http://www.w3.org/2000/svg','xmlns:xlink="http://www.w3.org/1999/xlink'); serialized = serialized.replace('xmlns="http://www.w3.org/2000/svg','xmlns:xlink="http://www.w3.org/1999/xlink');
} }
if(fixNamedEntities) { if (fixNamedEntities) {
keys = Object.keys(namedEntities); keys = Object.keys(namedEntities);
//loop over each named entity and replace with the proper equivalent. //loop over each named entity and replace with the proper equivalent.
for(i=0; i<keys.length; i++) { for (i=0; i<keys.length; i++) {
key = keys[i]; key = keys[i];
value = namedEntities[key]; value = namedEntities[key];
regexp = new RegExp(key, "gi"); regexp = new RegExp(key, "gi");
if(regexp.test(serialized)) { if (regexp.test(serialized)) {
serialized = serialized.replace(regexp, value); serialized = serialized.replace(regexp, value);
} }
} }
@ -453,14 +459,15 @@
* Returns the root svg * Returns the root svg
* @return * @return
*/ */
ctx.prototype.getSvg = function() { ctx.prototype.getSvg = function () {
return this.__root; return this.__root;
}; };
/** /**
* Will generate a group tag. * Will generate a group tag.
*/ */
ctx.prototype.save = function() { ctx.prototype.save = function () {
var group = this.__createElement("g"), parent = this.__closestGroupOrSvg(); var group = this.__createElement("g");
var parent = this.__closestGroupOrSvg();
this.__groupStack.push(parent); this.__groupStack.push(parent);
parent.appendChild(group); parent.appendChild(group);
this.__currentElement = group; this.__currentElement = group;
@ -469,33 +476,38 @@
/** /**
* Sets current element to parent, or just root if already root * Sets current element to parent, or just root if already root
*/ */
ctx.prototype.restore = function(){ ctx.prototype.restore = function () {
this.__currentElement = this.__groupStack.pop(); this.__currentElement = this.__groupStack.pop();
this.__currentElementsToStyle = null;
//Clearing canvas will make the poped group invalid, currentElement is set to the root group node. //Clearing canvas will make the poped group invalid, currentElement is set to the root group node.
if (!this.__currentElement) { if (!this.__currentElement) {
this.__currentElement = this.__root.childNodes[1]; this.__currentElement = this.__root.childNodes[1];
} }
var state = this.__stack.pop(); var state = this.__stack.pop();
this.__applyStyleState(state); this.__applyStyleState(state);
}; };
/** /**
* Helper method to add transform * Helper method to add transform
* @private * @private
*/ */
ctx.prototype.__addTransform = function(t) { ctx.prototype.__addTransform = function (t) {
//if the current element has siblings, add another group //if the current element has siblings, add another group
var parent = this.__closestGroupOrSvg(); var parent = this.__closestGroupOrSvg();
if(parent.childNodes.length > 0) { if (parent.childNodes.length > 0) {
if (this.__currentElement.nodeName === "path") {
if (!this.__currentElementsToStyle) this.__currentElementsToStyle = {element: parent, children: []};
this.__currentElementsToStyle.children.push(this.__currentElement)
this.__applyCurrentDefaultPath();
}
var group = this.__createElement("g"); var group = this.__createElement("g");
parent.appendChild(group); parent.appendChild(group);
this.__currentElement = group; this.__currentElement = group;
} }
var transform = this.__currentElement.getAttribute("transform"); var transform = this.__currentElement.getAttribute("transform");
if(transform) { if (transform) {
transform += " "; transform += " ";
} else { } else {
transform = ""; transform = "";
@ -507,8 +519,8 @@
/** /**
* scales the current element * scales the current element
*/ */
ctx.prototype.scale = function(x, y) { ctx.prototype.scale = function (x, y) {
if(y === undefined) { if (y === undefined) {
y = x; y = x;
} }
this.__addTransform(format("scale({x},{y})", {x:x, y:y})); this.__addTransform(format("scale({x},{y})", {x:x, y:y}));
@ -517,7 +529,7 @@
/** /**
* rotates the current element * rotates the current element
*/ */
ctx.prototype.rotate = function(angle){ ctx.prototype.rotate = function (angle) {
var degrees = (angle * 180 / Math.PI); var degrees = (angle * 180 / Math.PI);
this.__addTransform(format("rotate({angle},{cx},{cy})", {angle:degrees, cx:0, cy:0})); this.__addTransform(format("rotate({angle},{cx},{cy})", {angle:degrees, cx:0, cy:0}));
}; };
@ -525,21 +537,21 @@
/** /**
* translates the current element * translates the current element
*/ */
ctx.prototype.translate = function(x, y){ ctx.prototype.translate = function (x, y) {
this.__addTransform(format("translate({x},{y})", {x:x,y:y})); this.__addTransform(format("translate({x},{y})", {x:x,y:y}));
}; };
/** /**
* applies a transform to the current element * applies a transform to the current element
*/ */
ctx.prototype.transform = function(a, b, c, d, e, f){ ctx.prototype.transform = function (a, b, c, d, e, f) {
this.__addTransform(format("matrix({a},{b},{c},{d},{e},{f})", {a:a, b:b, c:c, d:d, e:e, f:f})); this.__addTransform(format("matrix({a},{b},{c},{d},{e},{f})", {a:a, b:b, c:c, d:d, e:e, f:f}));
}; };
/** /**
* Create a new Path Element * Create a new Path Element
*/ */
ctx.prototype.beginPath = function(){ ctx.prototype.beginPath = function () {
var path, parent; var path, parent;
// Note that there is only one current default path, it is not part of the drawing state. // Note that there is only one current default path, it is not part of the drawing state.
@ -557,12 +569,12 @@
* Helper function to apply currentDefaultPath to current path element * Helper function to apply currentDefaultPath to current path element
* @private * @private
*/ */
ctx.prototype.__applyCurrentDefaultPath = function() { ctx.prototype.__applyCurrentDefaultPath = function () {
if(this.__currentElement.nodeName === "path") { var currentElement = this.__currentElement;
var d = this.__currentDefaultPath; if (currentElement.nodeName === "path") {
this.__currentElement.setAttribute("d", d); currentElement.setAttribute("d", this.__currentDefaultPath);
} else { } else {
throw new Error("Attempted to apply path command to node " + this.__currentElement.nodeName); console.error("Attempted to apply path command to node", currentElement.nodeName);
} }
}; };
@ -570,7 +582,7 @@
* Helper function to add path command * Helper function to add path command
* @private * @private
*/ */
ctx.prototype.__addPathCommand = function(command){ ctx.prototype.__addPathCommand = function (command) {
this.__currentDefaultPath += " "; this.__currentDefaultPath += " ";
this.__currentDefaultPath += command; this.__currentDefaultPath += command;
}; };
@ -579,8 +591,8 @@
* Adds the move command to the current path element, * Adds the move command to the current path element,
* if the currentPathElement is not empty create a new path element * if the currentPathElement is not empty create a new path element
*/ */
ctx.prototype.moveTo = function(x,y){ ctx.prototype.moveTo = function (x,y) {
if(this.__currentElement.nodeName !== "path") { if (this.__currentElement.nodeName !== "path") {
this.beginPath(); this.beginPath();
} }
@ -592,14 +604,16 @@
/** /**
* Closes the current path * Closes the current path
*/ */
ctx.prototype.closePath = function(){ ctx.prototype.closePath = function () {
this.__addPathCommand("Z"); if (this.__currentDefaultPath) {
this.__addPathCommand("Z");
}
}; };
/** /**
* Adds a line to command * Adds a line to command
*/ */
ctx.prototype.lineTo = function(x, y){ ctx.prototype.lineTo = function (x, y) {
this.__currentPosition = {x: x, y: y}; this.__currentPosition = {x: x, y: y};
if (this.__currentDefaultPath.indexOf('M') > -1) { if (this.__currentDefaultPath.indexOf('M') > -1) {
this.__addPathCommand(format("L {x} {y}", {x:x, y:y})); this.__addPathCommand(format("L {x} {y}", {x:x, y:y}));
@ -611,7 +625,7 @@
/** /**
* Add a bezier command * Add a bezier command
*/ */
ctx.prototype.bezierCurveTo = function(cp1x, cp1y, cp2x, cp2y, x, y) { ctx.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
this.__currentPosition = {x: x, y: y}; this.__currentPosition = {x: x, y: y};
this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}", this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",
{cp1x:cp1x, cp1y:cp1y, cp2x:cp2x, cp2y:cp2y, x:x, y:y})); {cp1x:cp1x, cp1y:cp1y, cp2x:cp2x, cp2y:cp2y, x:x, y:y}));
@ -620,7 +634,7 @@
/** /**
* Adds a quadratic curve to command * Adds a quadratic curve to command
*/ */
ctx.prototype.quadraticCurveTo = function(cpx, cpy, x, y){ ctx.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
this.__currentPosition = {x: x, y: y}; this.__currentPosition = {x: x, y: y};
this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", {cpx:cpx, cpy:cpy, x:x, y:y})); this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", {cpx:cpx, cpy:cpy, x:x, y:y}));
}; };
@ -629,7 +643,7 @@
/** /**
* Return a new normalized vector of given vector * Return a new normalized vector of given vector
*/ */
var normalize = function(vector) { var normalize = function (vector) {
var len = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]); var len = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
return [vector[0] / len, vector[1] / len]; return [vector[0] / len, vector[1] / len];
}; };
@ -639,7 +653,7 @@
* *
* @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto * @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto
*/ */
ctx.prototype.arcTo = function(x1, y1, x2, y2, radius) { ctx.prototype.arcTo = function (x1, y1, x2, y2, radius) {
// Let the point (x0, y0) be the last point in the subpath. // Let the point (x0, y0) be the last point in the subpath.
var x0 = this.__currentPosition && this.__currentPosition.x; var x0 = this.__currentPosition && this.__currentPosition.x;
var y0 = this.__currentPosition && this.__currentPosition.y; var y0 = this.__currentPosition && this.__currentPosition.y;
@ -705,7 +719,7 @@
unit_vec_p1_p2[1], unit_vec_p1_p2[1],
-unit_vec_p1_p2[0] -unit_vec_p1_p2[0]
]; ];
var getAngle = function(vector) { var getAngle = function (vector) {
// get angle (clockwise) between vector and (1, 0) // get angle (clockwise) between vector and (1, 0)
var x = vector[0]; var x = vector[0];
var y = vector[1]; var y = vector[1];
@ -730,8 +744,8 @@
/** /**
* Sets the stroke property on the current element * Sets the stroke property on the current element
*/ */
ctx.prototype.stroke = function(){ ctx.prototype.stroke = function () {
if(this.__currentElement.nodeName === "path") { if (this.__currentElement.nodeName === "path") {
this.__currentElement.setAttribute("paint-order", "fill stroke markers"); this.__currentElement.setAttribute("paint-order", "fill stroke markers");
} }
this.__applyCurrentDefaultPath(); this.__applyCurrentDefaultPath();
@ -741,8 +755,8 @@
/** /**
* Sets fill properties on the current element * Sets fill properties on the current element
*/ */
ctx.prototype.fill = function(){ ctx.prototype.fill = function () {
if(this.__currentElement.nodeName === "path") { if (this.__currentElement.nodeName === "path") {
this.__currentElement.setAttribute("paint-order", "stroke fill markers"); this.__currentElement.setAttribute("paint-order", "stroke fill markers");
} }
this.__applyCurrentDefaultPath(); this.__applyCurrentDefaultPath();
@ -752,8 +766,8 @@
/** /**
* Adds a rectangle to the path. * Adds a rectangle to the path.
*/ */
ctx.prototype.rect = function(x, y, width, height){ ctx.prototype.rect = function (x, y, width, height) {
if(this.__currentElement.nodeName !== "path") { if (this.__currentElement.nodeName !== "path") {
this.beginPath(); this.beginPath();
} }
this.moveTo(x, y); this.moveTo(x, y);
@ -768,7 +782,7 @@
/** /**
* adds a rectangle element * adds a rectangle element
*/ */
ctx.prototype.fillRect = function(x, y, width, height){ ctx.prototype.fillRect = function (x, y, width, height) {
var rect, parent; var rect, parent;
rect = this.__createElement("rect", { rect = this.__createElement("rect", {
x : x, x : x,
@ -789,7 +803,7 @@
* @param width * @param width
* @param height * @param height
*/ */
ctx.prototype.strokeRect = function(x, y, width, height){ ctx.prototype.strokeRect = function (x, y, width, height) {
var rect, parent; var rect, parent;
rect = this.__createElement("rect", { rect = this.__createElement("rect", {
x : x, x : x,
@ -809,7 +823,7 @@
* 1. save current transforms * 1. save current transforms
* 2. remove all the childNodes of the root g element * 2. remove all the childNodes of the root g element
*/ */
ctx.prototype.__clearCanvas = function() { ctx.prototype.__clearCanvas = function () {
var current = this.__closestGroupOrSvg(), var current = this.__closestGroupOrSvg(),
transform = current.getAttribute("transform"); transform = current.getAttribute("transform");
var rootGroup = this.__root.childNodes[1]; var rootGroup = this.__root.childNodes[1];
@ -830,7 +844,7 @@
/** /**
* "Clears" a canvas by just drawing a white rectangle in the current group. * "Clears" a canvas by just drawing a white rectangle in the current group.
*/ */
ctx.prototype.clearRect = function(x, y, width, height) { ctx.prototype.clearRect = function (x, y, width, height) {
//clear entire canvas //clear entire canvas
if (x === 0 && y === 0 && width === this.width && height === this.height) { if (x === 0 && y === 0 && width === this.width && height === this.height) {
this.__clearCanvas(); this.__clearCanvas();
@ -851,7 +865,7 @@
* Adds a linear gradient to a defs tag. * Adds a linear gradient to a defs tag.
* Returns a canvas gradient object that has a reference to it's parent def * Returns a canvas gradient object that has a reference to it's parent def
*/ */
ctx.prototype.createLinearGradient = function(x1, y1, x2, y2){ ctx.prototype.createLinearGradient = function (x1, y1, x2, y2) {
var grad = this.__createElement("linearGradient", { var grad = this.__createElement("linearGradient", {
id : randomString(this.__ids), id : randomString(this.__ids),
x1 : x1+"px", x1 : x1+"px",
@ -868,7 +882,7 @@
* Adds a radial gradient to a defs tag. * Adds a radial gradient to a defs tag.
* Returns a canvas gradient object that has a reference to it's parent def * Returns a canvas gradient object that has a reference to it's parent def
*/ */
ctx.prototype.createRadialGradient = function(x0, y0, r0, x1, y1, r1){ ctx.prototype.createRadialGradient = function (x0, y0, r0, x1, y1, r1) {
var grad = this.__createElement("radialGradient", { var grad = this.__createElement("radialGradient", {
id : randomString(this.__ids), id : randomString(this.__ids),
cx : x1+"px", cx : x1+"px",
@ -887,8 +901,8 @@
* Parses the font string and returns svg mapping * Parses the font string and returns svg mapping
* @private * @private
*/ */
ctx.prototype.__parseFont = function() { ctx.prototype.__parseFont = function () {
var regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z]+?)\s*$/i; var regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z0-9]+?)\s*$/i;
var fontPart = regex.exec( this.font ); var fontPart = regex.exec( this.font );
var data = { var data = {
style : fontPart[1] || 'normal', style : fontPart[1] || 'normal',
@ -900,12 +914,12 @@
}; };
//canvas doesn't support underline natively, but we can pass this attribute //canvas doesn't support underline natively, but we can pass this attribute
if(this.__fontUnderline === "underline") { if (this.__fontUnderline === "underline") {
data.decoration = "underline"; data.decoration = "underline";
} }
//canvas also doesn't support linking, but we can pass this as well //canvas also doesn't support linking, but we can pass this as well
if(this.__fontHref) { if (this.__fontHref) {
data.href = this.__fontHref; data.href = this.__fontHref;
} }
@ -919,8 +933,8 @@
* @return {*} * @return {*}
* @private * @private
*/ */
ctx.prototype.__wrapTextLink = function(font, element) { ctx.prototype.__wrapTextLink = function (font, element) {
if(font.href) { if (font.href) {
var a = this.__createElement("a"); var a = this.__createElement("a");
a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href); a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
a.appendChild(element); a.appendChild(element);
@ -937,7 +951,7 @@
* @param action - stroke or fill * @param action - stroke or fill
* @private * @private
*/ */
ctx.prototype.__applyText = function(text, x, y, action) { ctx.prototype.__applyText = function (text, x, y, action) {
var font = this.__parseFont(), var font = this.__parseFont(),
parent = this.__closestGroupOrSvg(), parent = this.__closestGroupOrSvg(),
textElement = this.__createElement("text", { textElement = this.__createElement("text", {
@ -964,7 +978,7 @@
* @param x * @param x
* @param y * @param y
*/ */
ctx.prototype.fillText = function(text, x, y){ ctx.prototype.fillText = function (text, x, y) {
this.__applyText(text, x, y, "fill"); this.__applyText(text, x, y, "fill");
}; };
@ -974,7 +988,7 @@
* @param x * @param x
* @param y * @param y
*/ */
ctx.prototype.strokeText = function(text, x, y){ ctx.prototype.strokeText = function (text, x, y) {
this.__applyText(text, x, y, "stroke"); this.__applyText(text, x, y, "stroke");
}; };
@ -983,7 +997,7 @@
* @param text * @param text
* @return {TextMetrics} * @return {TextMetrics}
*/ */
ctx.prototype.measureText = function(text){ ctx.prototype.measureText = function (text) {
this.__ctx.font = this.font; this.__ctx.font = this.font;
return this.__ctx.measureText(text); return this.__ctx.measureText(text);
}; };
@ -991,14 +1005,14 @@
/** /**
* Arc command! * Arc command!
*/ */
ctx.prototype.arc = function(x, y, radius, startAngle, endAngle, counterClockwise) { ctx.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwise) {
// in canvas no circle is drawn if no angle is provided. // in canvas no circle is drawn if no angle is provided.
if (startAngle === endAngle) { if (startAngle === endAngle) {
return; return;
} }
startAngle = startAngle % (2*Math.PI); startAngle = startAngle % (2*Math.PI);
endAngle = endAngle % (2*Math.PI); endAngle = endAngle % (2*Math.PI);
if(startAngle === endAngle) { if (startAngle === endAngle) {
//circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle) //circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle)
endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI); endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI);
} }
@ -1011,11 +1025,11 @@
diff = endAngle - startAngle; diff = endAngle - startAngle;
// https://github.com/gliffy/canvas2svg/issues/4 // https://github.com/gliffy/canvas2svg/issues/4
if(diff < 0) { if (diff < 0) {
diff += 2*Math.PI; diff += 2*Math.PI;
} }
if(counterClockwise) { if (counterClockwise) {
largeArcFlag = diff > Math.PI ? 0 : 1; largeArcFlag = diff > Math.PI ? 0 : 1;
} else { } else {
largeArcFlag = diff > Math.PI ? 1 : 0; largeArcFlag = diff > Math.PI ? 1 : 0;
@ -1031,7 +1045,7 @@
/** /**
* Generates a ClipPath from the clip command. * Generates a ClipPath from the clip command.
*/ */
ctx.prototype.clip = function(){ ctx.prototype.clip = function () {
var group = this.__closestGroupOrSvg(), var group = this.__closestGroupOrSvg(),
clipPath = this.__createElement("clipPath"), clipPath = this.__createElement("clipPath"),
id = randomString(this.__ids), id = randomString(this.__ids),
@ -1060,28 +1074,28 @@
* Note that all svg dom manipulation uses node.childNodes rather than node.children for IE support. * Note that all svg dom manipulation uses node.childNodes rather than node.children for IE support.
* http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage
*/ */
ctx.prototype.drawImage = function(){ ctx.prototype.drawImage = function () {
//convert arguments to a real array //convert arguments to a real array
var args = Array.prototype.slice.call(arguments), var args = Array.prototype.slice.call(arguments),
image=args[0], image=args[0],
dx, dy, dw, dh, sx=0, sy=0, sw, sh, parent, svg, defs, group, dx, dy, dw, dh, sx=0, sy=0, sw, sh, parent, svg, defs, group,
currentElement, svgImage, canvas, context, id; currentElement, svgImage, canvas, context, id;
if(args.length === 3) { if (args.length === 3) {
dx = args[1]; dx = args[1];
dy = args[2]; dy = args[2];
sw = image.width; sw = image.width;
sh = image.height; sh = image.height;
dw = sw; dw = sw;
dh = sh; dh = sh;
} else if(args.length === 5) { } else if (args.length === 5) {
dx = args[1]; dx = args[1];
dy = args[2]; dy = args[2];
dw = args[3]; dw = args[3];
dh = args[4]; dh = args[4];
sw = image.width; sw = image.width;
sh = image.height; sh = image.height;
} else if(args.length === 9) { } else if (args.length === 9) {
sx = args[1]; sx = args[1];
sy = args[2]; sy = args[2];
sw = args[3]; sw = args[3];
@ -1097,7 +1111,7 @@
parent = this.__closestGroupOrSvg(); parent = this.__closestGroupOrSvg();
currentElement = this.__currentElement; currentElement = this.__currentElement;
var translateDirective = "translate(" + dx + ", " + dy + ")"; var translateDirective = "translate(" + dx + ", " + dy + ")";
if(image instanceof ctx) { if (image instanceof ctx) {
//canvas2svg mock canvas context. In the future we may want to clone nodes instead. //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. //also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
svg = image.getSvg().cloneNode(true); svg = image.getSvg().cloneNode(true);
@ -1122,14 +1136,14 @@
parent.appendChild(group); parent.appendChild(group);
} }
} }
} else if(image.nodeName === "CANVAS" || image.nodeName === "IMG") { } else if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
//canvas or image //canvas or image
svgImage = this.__createElement("image"); svgImage = this.__createElement("image");
svgImage.setAttribute("width", dw); svgImage.setAttribute("width", dw);
svgImage.setAttribute("height", dh); svgImage.setAttribute("height", dh);
svgImage.setAttribute("preserveAspectRatio", "none"); svgImage.setAttribute("preserveAspectRatio", "none");
if(sx || sy || sw !== image.width || sh !== image.height) { if (sx || sy || sw !== image.width || sh !== image.height) {
//crop the image using a temporary canvas //crop the image using a temporary canvas
canvas = this.__document.createElement("canvas"); canvas = this.__document.createElement("canvas");
canvas.width = dw; canvas.width = dw;
@ -1148,13 +1162,13 @@
/** /**
* Generates a pattern tag * Generates a pattern tag
*/ */
ctx.prototype.createPattern = function(image, repetition){ ctx.prototype.createPattern = function (image, repetition) {
var pattern = this.__document.createElementNS("http://www.w3.org/2000/svg", "pattern"), id = randomString(this.__ids), var pattern = this.__document.createElementNS("http://www.w3.org/2000/svg", "pattern"), id = randomString(this.__ids),
img; img;
pattern.setAttribute("id", id); pattern.setAttribute("id", id);
pattern.setAttribute("width", image.width); pattern.setAttribute("width", image.width);
pattern.setAttribute("height", image.height); pattern.setAttribute("height", image.height);
if(image.nodeName === "CANVAS" || image.nodeName === "IMG") { if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
img = this.__document.createElementNS("http://www.w3.org/2000/svg", "image"); img = this.__document.createElementNS("http://www.w3.org/2000/svg", "image");
img.setAttribute("width", image.width); img.setAttribute("width", image.width);
img.setAttribute("height", image.height); img.setAttribute("height", image.height);
@ -1162,14 +1176,14 @@
image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src")); image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
pattern.appendChild(img); pattern.appendChild(img);
this.__defs.appendChild(pattern); this.__defs.appendChild(pattern);
} else if(image instanceof ctx) { } else if (image instanceof ctx) {
pattern.appendChild(image.__root.childNodes[1]); pattern.appendChild(image.__root.childNodes[1]);
this.__defs.appendChild(pattern); this.__defs.appendChild(pattern);
} }
return new CanvasPattern(pattern, this); return new CanvasPattern(pattern, this);
}; };
ctx.prototype.setLineDash = function(dashArray) { ctx.prototype.setLineDash = function (dashArray) {
if (dashArray && dashArray.length > 0) { if (dashArray && dashArray.length > 0) {
this.lineDash = dashArray.join(","); this.lineDash = dashArray.join(",");
} else { } else {
@ -1180,12 +1194,12 @@
/** /**
* Not yet implemented * Not yet implemented
*/ */
ctx.prototype.drawFocusRing = function(){}; ctx.prototype.drawFocusRing = function () {};
ctx.prototype.createImageData = function(){}; ctx.prototype.createImageData = function () {};
ctx.prototype.getImageData = function(){}; ctx.prototype.getImageData = function () {};
ctx.prototype.putImageData = function(){}; ctx.prototype.putImageData = function () {};
ctx.prototype.globalCompositeOperation = function(){}; ctx.prototype.globalCompositeOperation = function () {};
ctx.prototype.setTransform = function(){}; ctx.prototype.setTransform = function () {};
//add options for alternative namespace //add options for alternative namespace
if (typeof window === "object") { if (typeof window === "object") {