Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

It is possible to use the lib with Chart JS to convert the chart into SVG #97

Open
insinfo opened this issue Apr 17, 2023 · 5 comments
Open

Comments

@insinfo
Copy link

insinfo commented Apr 17, 2023

@SamukaDEV
@gliffy
@Josephblt
@aliarshad9691
@zenozeng
@justinharrell
@mudcube
@kinimesi

Is it possible to use this lib to convert a Canvas rendered by the ChartJS lib to SVG? My use case is that I have a Dasboard with several graphics and I want to have the option to download the graphics in SVG format

@justinharrell
Copy link

justinharrell commented Apr 17, 2023

You can't not convert a canvas that has been rendered since its just a bitmap, you have to get ChartJS to use this as its canvas when it goes to render rather than the built in canvas.

@insinfo
Copy link
Author

insinfo commented Apr 17, 2023

I made a small modification to the canvas2svg.js code so that it works with ChartJS, it is rendering the SVG correctly but the rendering on Canvas is compromised, as can be seen in the posted image. Could it be that I can't use the canvas and SVG used by canvas2svg simultaneously?

image

 void renderChart() {
    
    var ctxC = canvas!.context2D;

    var c2Ss = C2S(C2SOptions(
      ctx: ctxC,
      canvas: canvas,
    ));

    final labels = items.map((e) => e['nom_situacao']).toList();
    final total = items.map((e) => e['total']).toList();

    final data = LinearChartData(labels: labels, datasets: <ChartDataSets>[
      ChartDataSets(
          // pointRadius: 5,
          //  borderRadius:5,
          label: 'processos por situacao',
          backgroundColor: FlatColor.generate2(
              length: total.length, inverse: false), //'#a009ed',
          data: total)
    ]);

    final config = ChartConfiguration(
        type: 'pie',
        data: data,
        options: ChartOptions(
          responsive: true,
          maintainAspectRatio: false,
          legend: ChartLegendOptions(display: true),
        ));

    Chart(c2Ss, config);

    Future.delayed(Duration(milliseconds: 1000), () {
      print('result SVG ${c2Ss.getSerializedSvg()}');
    });
  }
/*!!
 *  Canvas 2 Svg v1.0.19
 *  A low level canvas to SVG converter. Uses a mock canvas context to build an SVG document.
 *
 *  Licensed under the MIT license:
 *  http://www.opensource.org/licenses/mit-license.php
 *
 *  Author:
 *  Kerry Liu
 *
 *  Copyright (c) 2014 Gliffy Inc.
 */

; (function () {
    "use strict";

    var STYLES, ctx, CanvasGradient, CanvasPattern, namedEntities;


    //helper function to format a string
    function format(str, args) {
        var keys = Object.keys(args), i;
        for (i = 0; i < keys.length; i++) {
            str = str.replace(new RegExp("\\{" + keys[i] + "\\}", "gi"), args[keys[i]]);
        }
        return str;
    }

    //helper function that generates a random string
    function randomString(holder) {
        var chars, randomstring, i;
        if (!holder) {
            throw new Error("cannot create a random attribute name for an undefined object");
        }
        chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
        randomstring = "";
        do {
            randomstring = "";
            for (i = 0; i < 12; i++) {
                randomstring += chars[Math.floor(Math.random() * chars.length)];
            }
        } while (holder[randomstring]);
        return randomstring;
    }

    //helper function to map named to numbered entities
    function createNamedToNumberedLookup(items, radix) {
        var i, entity, lookup = {}, base10, base16;
        items = items.split(',');
        radix = radix || 10;
        // Map from named to numbered entities.
        for (i = 0; i < items.length; i += 2) {
            entity = '&' + items[i + 1] + ';';
            base10 = parseInt(items[i], radix);
            lookup[entity] = '&#' + base10 + ';';
        }
        //FF and IE need to create a regex from hex values ie &nbsp; == \xa0
        lookup["\\xa0"] = '&#160;';
        return lookup;
    }

    //helper function to map canvas-textAlign to svg-textAnchor
    function getTextAnchor(textAlign) {
        //TODO: support rtl languages
        var mapping = { "left": "start", "right": "end", "center": "middle", "start": "start", "end": "end" };
        return mapping[textAlign] || mapping.start;
    }

    //helper function to map canvas-textBaseline to svg-dominantBaseline
    function getDominantBaseline(textBaseline) {
        //INFO: not supported in all browsers
        var mapping = { "alphabetic": "alphabetic", "hanging": "hanging", "top": "text-before-edge", "bottom": "text-after-edge", "middle": "central" };
        return mapping[textBaseline] || mapping.alphabetic;
    }

    // Unpack entities lookup where the numbers are in radix 32 to reduce the size
    // entity mapping courtesy of tinymce
    namedEntities = createNamedToNumberedLookup(
        '50,nbsp,51,iexcl,52,cent,53,pound,54,curren,55,yen,56,brvbar,57,sect,58,uml,59,copy,' +
        '5a,ordf,5b,laquo,5c,not,5d,shy,5e,reg,5f,macr,5g,deg,5h,plusmn,5i,sup2,5j,sup3,5k,acute,' +
        '5l,micro,5m,para,5n,middot,5o,cedil,5p,sup1,5q,ordm,5r,raquo,5s,frac14,5t,frac12,5u,frac34,' +
        '5v,iquest,60,Agrave,61,Aacute,62,Acirc,63,Atilde,64,Auml,65,Aring,66,AElig,67,Ccedil,' +
        '68,Egrave,69,Eacute,6a,Ecirc,6b,Euml,6c,Igrave,6d,Iacute,6e,Icirc,6f,Iuml,6g,ETH,6h,Ntilde,' +
        '6i,Ograve,6j,Oacute,6k,Ocirc,6l,Otilde,6m,Ouml,6n,times,6o,Oslash,6p,Ugrave,6q,Uacute,' +
        '6r,Ucirc,6s,Uuml,6t,Yacute,6u,THORN,6v,szlig,70,agrave,71,aacute,72,acirc,73,atilde,74,auml,' +
        '75,aring,76,aelig,77,ccedil,78,egrave,79,eacute,7a,ecirc,7b,euml,7c,igrave,7d,iacute,7e,icirc,' +
        '7f,iuml,7g,eth,7h,ntilde,7i,ograve,7j,oacute,7k,ocirc,7l,otilde,7m,ouml,7n,divide,7o,oslash,' +
        '7p,ugrave,7q,uacute,7r,ucirc,7s,uuml,7t,yacute,7u,thorn,7v,yuml,ci,fnof,sh,Alpha,si,Beta,' +
        'sj,Gamma,sk,Delta,sl,Epsilon,sm,Zeta,sn,Eta,so,Theta,sp,Iota,sq,Kappa,sr,Lambda,ss,Mu,' +
        'st,Nu,su,Xi,sv,Omicron,t0,Pi,t1,Rho,t3,Sigma,t4,Tau,t5,Upsilon,t6,Phi,t7,Chi,t8,Psi,' +
        't9,Omega,th,alpha,ti,beta,tj,gamma,tk,delta,tl,epsilon,tm,zeta,tn,eta,to,theta,tp,iota,' +
        'tq,kappa,tr,lambda,ts,mu,tt,nu,tu,xi,tv,omicron,u0,pi,u1,rho,u2,sigmaf,u3,sigma,u4,tau,' +
        'u5,upsilon,u6,phi,u7,chi,u8,psi,u9,omega,uh,thetasym,ui,upsih,um,piv,812,bull,816,hellip,' +
        '81i,prime,81j,Prime,81u,oline,824,frasl,88o,weierp,88h,image,88s,real,892,trade,89l,alefsym,' +
        '8cg,larr,8ch,uarr,8ci,rarr,8cj,darr,8ck,harr,8dl,crarr,8eg,lArr,8eh,uArr,8ei,rArr,8ej,dArr,' +
        '8ek,hArr,8g0,forall,8g2,part,8g3,exist,8g5,empty,8g7,nabla,8g8,isin,8g9,notin,8gb,ni,8gf,prod,' +
        '8gh,sum,8gi,minus,8gn,lowast,8gq,radic,8gt,prop,8gu,infin,8h0,ang,8h7,and,8h8,or,8h9,cap,8ha,cup,' +
        '8hb,int,8hk,there4,8hs,sim,8i5,cong,8i8,asymp,8j0,ne,8j1,equiv,8j4,le,8j5,ge,8k2,sub,8k3,sup,8k4,' +
        'nsub,8k6,sube,8k7,supe,8kl,oplus,8kn,otimes,8l5,perp,8m5,sdot,8o8,lceil,8o9,rceil,8oa,lfloor,8ob,' +
        'rfloor,8p9,lang,8pa,rang,9ea,loz,9j0,spades,9j3,clubs,9j5,hearts,9j6,diams,ai,OElig,aj,oelig,b0,' +
        'Scaron,b1,scaron,bo,Yuml,m6,circ,ms,tilde,802,ensp,803,emsp,809,thinsp,80c,zwnj,80d,zwj,80e,lrm,' +
        '80f,rlm,80j,ndash,80k,mdash,80o,lsquo,80p,rsquo,80q,sbquo,80s,ldquo,80t,rdquo,80u,bdquo,810,dagger,' +
        '811,Dagger,81g,permil,81p,lsaquo,81q,rsaquo,85c,euro', 32);


    //Some basic mappings for attributes and default values.
    STYLES = {
        "strokeStyle": {
            svgAttr: "stroke", //corresponding svg attribute
            canvas: "#000000", //canvas default
            svg: "none",       //svg default
            apply: "stroke"    //apply on stroke() or fill()
        },
        "fillStyle": {
            svgAttr: "fill",
            canvas: "#000000",
            svg: null, //svg default is black, but we need to special case this to handle canvas stroke without fill
            apply: "fill"
        },
        "lineCap": {
            svgAttr: "stroke-linecap",
            canvas: "butt",
            svg: "butt",
            apply: "stroke"
        },
        "lineJoin": {
            svgAttr: "stroke-linejoin",
            canvas: "miter",
            svg: "miter",
            apply: "stroke"
        },
        "miterLimit": {
            svgAttr: "stroke-miterlimit",
            canvas: 10,
            svg: 4,
            apply: "stroke"
        },
        "lineWidth": {
            svgAttr: "stroke-width",
            canvas: 1,
            svg: 1,
            apply: "stroke"
        },
        "globalAlpha": {
            svgAttr: "opacity",
            canvas: 1,
            svg: 1,
            apply: "fill stroke"
        },
        "font": {
            //font converts to multiple svg attributes, there is custom logic for this
            canvas: "10px sans-serif"
        },
        "shadowColor": {
            canvas: "#000000"
        },
        "shadowOffsetX": {
            canvas: 0
        },
        "shadowOffsetY": {
            canvas: 0
        },
        "shadowBlur": {
            canvas: 0
        },
        "textAlign": {
            canvas: "start"
        },
        "textBaseline": {
            canvas: "alphabetic"
        },
        "lineDash": {
            svgAttr: "stroke-dasharray",
            canvas: [],
            svg: null,
            apply: "stroke"
        }
    };

    /**
     *
     * @param gradientNode - reference to the gradient
     * @constructor
     */
    CanvasGradient = function (gradientNode, ctx) {
        this.__root = gradientNode;
        this.__ctx = ctx;
    };

    /**
     * Adds a color stop to the gradient root
     */
    CanvasGradient.prototype.addColorStop = function (offset, color) {
        var stop = this.__ctx.__createElement("stop"), regex, matches;
        stop.setAttribute("offset", offset);
        if (color.indexOf("rgba") !== -1) {
            //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;
            matches = regex.exec(color);
            stop.setAttribute("stop-color", format("rgb({r},{g},{b})", { r: matches[1], g: matches[2], b: matches[3] }));
            stop.setAttribute("stop-opacity", matches[4]);
        } else {
            stop.setAttribute("stop-color", color);
        }
        this.__root.appendChild(stop);
    };

    CanvasPattern = function (pattern, ctx) {
        this.__root = pattern;
        this.__ctx = ctx;
    };

    /**
     * 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)
     * document - the document object (defaults to the current document)
     */
    ctx = function (o) {
        var defaultOptions = { width: 500, height: 500, enableMirroring: false }, options;

        //keep support for this way of calling C2S: new C2S(width,height)
        if (arguments.length > 1) {
            options = defaultOptions;
            options.width = arguments[0];
            options.height = arguments[1];
        } else if (!o) {
            options = defaultOptions;
        } else {
            options = o;
        }

        if (!(this instanceof ctx)) {
            //did someone call this without new?
            return new ctx(options);
        }

        //setup options
        this.width = options.width || defaultOptions.width;
        this.height = options.height || defaultOptions.height;
        this.enableMirroring = options.enableMirroring !== undefined ? options.enableMirroring : defaultOptions.enableMirroring;

        this.canvas = this;   ///point back to this instance!
        this.__document = options.document || document;

        // 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;
            this.__canvas = options.canvas;
        } else {
            // this.__canvas = this.__document.createElement("canvas");
            // this.__ctx = this.__canvas.getContext("2d");
        }

        this.__setDefaultStyles();
        this.__stack = [this.__getStyleState()];
        this.__groupStack = [];

        //the root svg element
        this.__root = this.__document.createElementNS("http://www.w3.org/2000/svg", "svg");
        this.__root.setAttribute("version", 1.1);
        this.__root.setAttribute("xmlns", "http://www.w3.org/2000/svg");
        this.__root.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
        this.__root.setAttribute("width", this.width);
        this.__root.setAttribute("height", this.height);

        //make sure we don't generate the same ids in defs
        this.__ids = {};

        //defs tag
        this.__defs = this.__document.createElementNS("http://www.w3.org/2000/svg", "defs");
        this.__root.appendChild(this.__defs);

        //also add a group child. the svg element can't use the transform attribute
        this.__currentElement = this.__document.createElementNS("http://www.w3.org/2000/svg", "g");
        this.__root.appendChild(this.__currentElement);
    };

    // Object.defineProperty(ctx.prototype, "fillStyle", {
    //     get: function fillStyle() {
    //     }
    // });

    // isaque adicionou isso para funcionar com ChartJS
    ctx.prototype.__defineGetter__("fillStyle", function () {
        //console.log('ctx.prototype.__defineGetter__');
        return this._fillStyle;
    });
    ctx.prototype.__defineSetter__("fillStyle", function (val) {
        //console.log(`ctx.prototype.__defineSetter ${val}`);
        this.__ctx.fillStyle = val;
        this._fillStyle = val;
    });
    ctx.prototype.__defineGetter__("strokeStyle", function () {
        return this._strokeStyle;
    });
    ctx.prototype.__defineSetter__("strokeStyle", function (val) {
        this.__ctx.strokeStyle = val;
        this._strokeStyle = val;
    });
    ctx.prototype.__defineGetter__("lineCap", function () {
        return this._lineCap;
    });
    ctx.prototype.__defineSetter__("lineCap", function (val) {
        this.__ctx.lineCap = val;
        this._lineCap = val;
    });
    ctx.prototype.__defineGetter__("lineJoin", function () {
        return this._lineJoin;
    });
    ctx.prototype.__defineSetter__("lineJoin", function (val) {
        this.__ctx.lineJoin = val;
        this._lineJoin = val;
    });
    ctx.prototype.__defineGetter__("miterLimit", function () {
        return this._miterLimit;
    });
    ctx.prototype.__defineSetter__("miterLimit", function (val) {
        this.__ctx.miterLimit = val;
        this._miterLimit = val;
    });
    ctx.prototype.__defineGetter__("lineWidth", function () {
        return this._lineWidth;
    });
    ctx.prototype.__defineSetter__("lineWidth", function (val) {
        this.__ctx.lineWidth = val;
        this._lineWidth = val;
    });
    ctx.prototype.__defineGetter__("globalAlpha", function () {
        return this._globalAlpha;
    });
    ctx.prototype.__defineSetter__("globalAlpha", function (val) {
        this.__ctx.globalAlpha = val;
        this._globalAlpha = val;
    });
    ctx.prototype.__defineGetter__("textAlign", function () {
        return this._textAlign;
    });
    ctx.prototype.__defineSetter__("textAlign", function (val) {
        this.__ctx.textAlign = val;
        this._textAlign = val;
    });

    ctx.prototype.__defineGetter__("parentNode", function () {
        return this.__canvas.parentNode;
    });


    /**
     * Creates the specified svg element
     * @private
     */
    ctx.prototype.__createElement = function (elementName, properties, resetFill) {
        if (typeof properties === "undefined") {
            properties = {};
        }

        var element = this.__document.createElementNS("http://www.w3.org/2000/svg", elementName),
            keys = Object.keys(properties), i, key;
        if (resetFill) {
            //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("stroke", "none");
        }
        for (i = 0; i < keys.length; i++) {
            key = keys[i];
            element.setAttribute(key, properties[key]);
        }
        return element;
    };

    /**
     * Applies default canvas styles to the context
     * @private
     */
    ctx.prototype.__setDefaultStyles = function () {
        //console.log(`ctx.prototype.__setDefaultStyles `);
        //default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/
        var keys = Object.keys(STYLES), i, key;
        for (i = 0; i < keys.length; i++) {
            key = keys[i];
            this[key] = STYLES[key].canvas;
            //console.log(`ctx.prototype.__setDefaultStyles ${key} ${this[key]}`);
        }
    };

    /**
     * Applies styles on restore
     * @param styleState
     * @private
     */
    ctx.prototype.__applyStyleState = function (styleState) {
       // console.log(`ctx.prototype.__applyStyleState`);
        var keys = Object.keys(styleState), i, key;
        for (i = 0; i < keys.length; i++) {
            key = keys[i];
            this[key] = styleState[key];
        }
    };

    /**
     * Gets the current style state
     * @return {Object}
     * @private
     */
    ctx.prototype.__getStyleState = function () {
       // console.log(`ctx.prototype.__getStyleState`);
        var i, styleState = {}, keys = Object.keys(STYLES), key;
        for (i = 0; i < keys.length; i++) {
            key = keys[i];
            styleState[key] = this[key];
        }
        return styleState;
    };

    /**
     * Apples the current styles to the current SVG element. On "ctx.fill" or "ctx.stroke"
     * @param type
     * @private
     */
    ctx.prototype.__applyStyleToCurrentElement = function (type) {
        //console.log(`ctx.prototype.__applyStyleToCurrentElement ${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;
        for (i = 0; i < keys.length; i++) {
            style = STYLES[keys[i]];
            value = this[keys[i]];
            // console.log(`ctx.prototype.__applyStyleToCurrentElement value ${keys[i]} ${value}`);
            if (style.apply) {
                //is this a gradient or pattern?
                if (value instanceof CanvasPattern) {
                    //pattern
                    if (value.__ctx) {
                        //copy over defs
                        while (value.__ctx.__defs.childNodes.length) {
                            id = value.__ctx.__defs.childNodes[0].getAttribute("id");
                            this.__ids[id] = id;
                            this.__defs.appendChild(value.__ctx.__defs.childNodes[0]);
                        }
                    }
                    currentElement.setAttribute(style.apply, format("url(#{id})", { id: value.__root.getAttribute("id") }));
                }
                else if (value instanceof CanvasGradient) {
                    //gradient
                    currentElement.setAttribute(style.apply, format("url(#{id})", { id: value.__root.getAttribute("id") }));
                } else if (style.apply.indexOf(type) !== -1 && style.svg !== value) {
                    if ((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1) {
                        //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;
                        matches = regex.exec(value);
                        currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", { r: matches[1], g: matches[2], b: matches[3] }));
                        //should take globalAlpha here
                        var opacity = matches[4];
                        var globalAlpha = this.globalAlpha;
                        if (globalAlpha != null) {
                            opacity *= globalAlpha;
                        }
                        currentElement.setAttribute(style.svgAttr + "-opacity", opacity);
                    } else {
                        var attr = style.svgAttr;
                        if (keys[i] === 'globalAlpha') {
                            attr = type + '-' + style.svgAttr;
                            if (currentElement.getAttribute(attr)) {
                                //fill-opacity or stroke-opacity has already been set by stroke or fill.
                                continue;
                            }
                        }
                        //otherwise only update attribute if right type, and not svg default
                        currentElement.setAttribute(attr, value);
                    }
                }
            }
        }
    };

    /**
     * Will return the closest group or svg node. May return the current element.
     * @private
     */
    ctx.prototype.__closestGroupOrSvg = function (node) {
        node = node || this.__currentElement;
        if (node.nodeName === "g" || node.nodeName === "svg") {
            return node;
        } else {
            return this.__closestGroupOrSvg(node.parentNode);
        }
    };


    /**
     * Returns the serialized value of the svg so far
     * @param fixNamedEntities - Standalone SVG doesn't support named entities, which document.createTextNode encodes.
     *                           If true, we attempt to find all named entities and encode it as a numeric entity.
     * @return serialized svg
     */
    ctx.prototype.getSerializedSvg = function (fixNamedEntities) {
        var serialized = new XMLSerializer().serializeToString(this.__root),
            keys, i, key, value, regexp, xmlns;

        //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;
        if (xmlns.test(serialized)) {
            serialized = serialized.replace('xmlns="http://www.w3.org/2000/svg', 'xmlns:xlink="http://www.w3.org/1999/xlink');
        }

        if (fixNamedEntities) {
            keys = Object.keys(namedEntities);
            //loop over each named entity and replace with the proper equivalent.
            for (i = 0; i < keys.length; i++) {
                key = keys[i];
                value = namedEntities[key];
                regexp = new RegExp(key, "gi");
                if (regexp.test(serialized)) {
                    serialized = serialized.replace(regexp, value);
                }
            }
        }

        return serialized;
    };


    /**
     * Returns the root svg
     * @return
     */
    ctx.prototype.getSvg = function () {
        return this.__root;
    };
    /**
     * Will generate a group tag.
     */
    ctx.prototype.save = function () {
        var group = this.__createElement("g");
        var parent = this.__closestGroupOrSvg();
        this.__groupStack.push(parent);
        parent.appendChild(group);
        this.__currentElement = group;
        this.__stack.push(this.__getStyleState());
    };
    /**
     * Sets current element to parent, or just root if already root
     */
    ctx.prototype.restore = function () {
        this.__currentElement = this.__groupStack.pop();
        this.__currentElementsToStyle = null;
        //Clearing canvas will make the poped group invalid, currentElement is set to the root group node.
        if (!this.__currentElement) {
            this.__currentElement = this.__root.childNodes[1];
        }
        var state = this.__stack.pop();
        this.__applyStyleState(state);
    };

    /**
     * Helper method to add transform
     * @private
     */
    ctx.prototype.__addTransform = function (t) {
        //if the current element has siblings, add another group
        var parent = this.__closestGroupOrSvg();
        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");
            parent.appendChild(group);
            this.__currentElement = group;
        }

        var transform = this.__currentElement.getAttribute("transform");
        if (transform) {
            transform += " ";
        } else {
            transform = "";
        }
        transform += t;
        this.__currentElement.setAttribute("transform", transform);
    };

    /**
     *  scales the current element
     */
    ctx.prototype.scale = function (x, y) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.scale(x, y);
        }

        if (y === undefined) {
            y = x;
        }
        this.__addTransform(format("scale({x},{y})", { x: x, y: y }));
    };

    /**
     * rotates the current element
     */
    ctx.prototype.rotate = function (angle) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.rotate(angle);
        }

        var degrees = (angle * 180 / Math.PI);
        this.__addTransform(format("rotate({angle},{cx},{cy})", { angle: degrees, cx: 0, cy: 0 }));
    };

    /**
     * translates the current element
     */
    ctx.prototype.translate = function (x, y) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.translate(x, y);
        }

        this.__addTransform(format("translate({x},{y})", { x: x, y: y }));
    };

    /**
     * applies a transform to the current element
     */
    ctx.prototype.transform = function (a, b, c, d, e, f) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.transform(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 }));
    };

    /**
     * Create a new Path Element
     */
    ctx.prototype.beginPath = function () {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.beginPath();
        }

        var path, parent;

        // Note that there is only one current default path, it is not part of the drawing state.
        // See also: https://html.spec.whatwg.org/multipage/scripting.html#current-default-path
        this.__currentDefaultPath = "";
        this.__currentPosition = {};

        path = this.__createElement("path", {}, true);
        parent = this.__closestGroupOrSvg();
        parent.appendChild(path);
        this.__currentElement = path;
    };

    /**
     * Helper function to apply currentDefaultPath to current path element
     * @private
     */
    ctx.prototype.__applyCurrentDefaultPath = function () {
        var currentElement = this.__currentElement;
        if (currentElement.nodeName === "path") {
            currentElement.setAttribute("d", this.__currentDefaultPath);
        } else {
            console.error("Attempted to apply path command to node", currentElement.nodeName);
        }
    };

    /**
     * Helper function to add path command
     * @private
     */
    ctx.prototype.__addPathCommand = function (command) {
        this.__currentDefaultPath += " ";
        this.__currentDefaultPath += command;
    };

    /**
     * Adds the move command to the current path element,
     * if the currentPathElement is not empty create a new path element
     */
    ctx.prototype.moveTo = function (x, y) {
        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.moveTo(x, y);
        }

        if (this.__currentElement.nodeName !== "path") {
            this.beginPath();
        }

        // creates a new subpath with the given point
        this.__currentPosition = { x: x, y: y };
        this.__addPathCommand(format("M {x} {y}", { x: x, y: y }));
    };

    /**
     * Closes the current path
     */
    ctx.prototype.closePath = function () {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.closePath();
        }

        if (this.__currentDefaultPath) {
            this.__addPathCommand("Z");
        }
    };

    /**
     * Adds a line to command
     */
    ctx.prototype.lineTo = function (x, y) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.lineTo(x, y);
        }

        this.__currentPosition = { x: x, y: y };
        if (this.__currentDefaultPath.indexOf('M') > -1) {
            this.__addPathCommand(format("L {x} {y}", { x: x, y: y }));
        } else {
            this.__addPathCommand(format("M {x} {y}", { x: x, y: y }));
        }
    };

    /**
     * Add a bezier command
     */
    ctx.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
        }

        this.__currentPosition = { x: x, y: y };
        this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",
            { cp1x: cp1x, cp1y: cp1y, cp2x: cp2x, cp2y: cp2y, x: x, y: y }));
    };

    /**
     * Adds a quadratic curve to command
     */
    ctx.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.quadraticCurveTo(cpx, cpy, x, y);
        }

        this.__currentPosition = { x: x, y: y };
        this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", { cpx: cpx, cpy: cpy, x: x, y: y }));
    };


    /**
     * Return a new normalized vector of given vector
     */
    var normalize = function (vector) {

        var len = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
        return [vector[0] / len, vector[1] / len];
    };

    /**
     * Adds the arcTo to the current path
     *
     * @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto
     */
    ctx.prototype.arcTo = function (x1, y1, x2, y2, radius) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.arcTo(x1, y1, x2, y2, radius);
        }

        // Let the point (x0, y0) be the last point in the subpath.
        var x0 = this.__currentPosition && this.__currentPosition.x;
        var y0 = this.__currentPosition && this.__currentPosition.y;

        // First ensure there is a subpath for (x1, y1).
        if (typeof x0 == "undefined" || typeof y0 == "undefined") {
            return;
        }

        // Negative values for radius must cause the implementation to throw an IndexSizeError exception.
        if (radius < 0) {
            throw new Error("IndexSizeError: The radius provided (" + radius + ") is negative.");
        }

        // If the point (x0, y0) is equal to the point (x1, y1),
        // or if the point (x1, y1) is equal to the point (x2, y2),
        // or if the radius radius is zero,
        // then the method must add the point (x1, y1) to the subpath,
        // and connect that point to the previous point (x0, y0) by a straight line.
        if (((x0 === x1) && (y0 === y1))
            || ((x1 === x2) && (y1 === y2))
            || (radius === 0)) {
            this.lineTo(x1, y1);
            return;
        }

        // Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a single straight line,
        // then the method must add the point (x1, y1) to the subpath,
        // and connect that point to the previous point (x0, y0) by a straight line.
        var unit_vec_p1_p0 = normalize([x0 - x1, y0 - y1]);
        var unit_vec_p1_p2 = normalize([x2 - x1, y2 - y1]);
        if (unit_vec_p1_p0[0] * unit_vec_p1_p2[1] === unit_vec_p1_p0[1] * unit_vec_p1_p2[0]) {
            this.lineTo(x1, y1);
            return;
        }

        // Otherwise, let The Arc be the shortest arc given by circumference of the circle that has radius radius,
        // and that has one point tangent to the half-infinite line that crosses the point (x0, y0) and ends at the point (x1, y1),
        // and that has a different point tangent to the half-infinite line that ends at the point (x1, y1), and crosses the point (x2, y2).
        // The points at which this circle touches these two lines are called the start and end tangent points respectively.

        // note that both vectors are unit vectors, so the length is 1
        var cos = (unit_vec_p1_p0[0] * unit_vec_p1_p2[0] + unit_vec_p1_p0[1] * unit_vec_p1_p2[1]);
        var theta = Math.acos(Math.abs(cos));

        // Calculate origin
        var unit_vec_p1_origin = normalize([
            unit_vec_p1_p0[0] + unit_vec_p1_p2[0],
            unit_vec_p1_p0[1] + unit_vec_p1_p2[1]
        ]);
        var len_p1_origin = radius / Math.sin(theta / 2);
        var x = x1 + len_p1_origin * unit_vec_p1_origin[0];
        var y = y1 + len_p1_origin * unit_vec_p1_origin[1];

        // Calculate start angle and end angle
        // rotate 90deg clockwise (note that y axis points to its down)
        var unit_vec_origin_start_tangent = [
            -unit_vec_p1_p0[1],
            unit_vec_p1_p0[0]
        ];
        // rotate 90deg counter clockwise (note that y axis points to its down)
        var unit_vec_origin_end_tangent = [
            unit_vec_p1_p2[1],
            -unit_vec_p1_p2[0]
        ];
        var getAngle = function (vector) {
            // get angle (clockwise) between vector and (1, 0)
            var x = vector[0];
            var y = vector[1];
            if (y >= 0) { // note that y axis points to its down
                return Math.acos(x);
            } else {
                return -Math.acos(x);
            }
        };
        var startAngle = getAngle(unit_vec_origin_start_tangent);
        var endAngle = getAngle(unit_vec_origin_end_tangent);

        // Connect the point (x0, y0) to the start tangent point by a straight line
        this.lineTo(x + unit_vec_origin_start_tangent[0] * radius,
            y + unit_vec_origin_start_tangent[1] * radius);

        // Connect the start tangent point to the end tangent point by arc
        // and adding the end tangent point to the subpath.
        this.arc(x, y, radius, startAngle, endAngle);
    };

    /**
     * Sets the stroke property on the current element
     */
    ctx.prototype.stroke = function () {
        // console.log('ctx.prototype.stroke');
        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.stroke();
        }

        if (this.__currentElement.nodeName === "path") {
            this.__currentElement.setAttribute("paint-order", "fill stroke markers");
        }
        this.__applyCurrentDefaultPath();
        this.__applyStyleToCurrentElement("stroke");
    };

    /**
     * Sets fill properties on the current element
     */
    ctx.prototype.fill = function () {
       // console.log('ctx.prototype.fill');
        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.fill();
        }

        if (this.__currentElement.nodeName === "path") {
            this.__currentElement.setAttribute("paint-order", "stroke fill markers");
        }
        this.__applyCurrentDefaultPath();
        this.__applyStyleToCurrentElement("fill");
    };

    /**
     *  Adds a rectangle to the path.
     */
    ctx.prototype.rect = function (x, y, width, height) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.rect(x, y, width, height);
        }

        if (this.__currentElement.nodeName !== "path") {
            this.beginPath();
        }
        this.moveTo(x, y);
        this.lineTo(x + width, y);
        this.lineTo(x + width, y + height);
        this.lineTo(x, y + height);
        this.lineTo(x, y);
        this.closePath();
    };


    /**
     * adds a rectangle element
     */
    ctx.prototype.fillRect = function (x, y, width, height) {
       // console.log(' ctx.prototype.fillRect ');
       // console.log(this.__ctx.fillStyle);
        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.fillRect(x, y, width, height);
        }

        var rect, parent;
        rect = this.__createElement("rect", {
            x: x,
            y: y,
            width: width,
            height: height
        }, true);
        parent = this.__closestGroupOrSvg();
        parent.appendChild(rect);
        this.__currentElement = rect;
        this.__applyStyleToCurrentElement("fill");
    };

    /**
     * Draws a rectangle with no fill
     * @param x
     * @param y
     * @param width
     * @param height
     */
    ctx.prototype.strokeRect = function (x, y, width, height) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.strokeRect(x, y, width, height);
        }

        var rect, parent;
        rect = this.__createElement("rect", {
            x: x,
            y: y,
            width: width,
            height: height
        }, true);
        parent = this.__closestGroupOrSvg();
        parent.appendChild(rect);
        this.__currentElement = rect;
        this.__applyStyleToCurrentElement("stroke");
    };


    /**
     * Clear entire canvas:
     * 1. save current transforms
     * 2. remove all the childNodes of the root g element
     */
    ctx.prototype.__clearCanvas = function () {
        //console.log('ctx.prototype.__clearCanvas');

        var current = this.__closestGroupOrSvg(),
            transform = current.getAttribute("transform");
        var rootGroup = this.__root.childNodes[1];
        var childNodes = rootGroup.childNodes;
        for (var i = childNodes.length - 1; i >= 0; i--) {
            if (childNodes[i]) {
                rootGroup.removeChild(childNodes[i]);
            }
        }
        this.__currentElement = rootGroup;
        //reset __groupStack as all the child group nodes are all removed.
        this.__groupStack = [];
        if (transform) {
            this.__addTransform(transform);
        }
    };

    /**
     * "Clears" a canvas by just drawing a white rectangle in the current group.
     */
    ctx.prototype.clearRect = function (x, y, width, height) {
        //console.log('ctx.prototype.clearRect');

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.clearRect(x, y, width, height);
        }

        //clear entire canvas
        if (x === 0 && y === 0 && width === this.width && height === this.height) {
            this.__clearCanvas();
            return;
        }
        var rect, parent = this.__closestGroupOrSvg();
        rect = this.__createElement("rect", {
            x: x,
            y: y,
            width: width,
            height: height,
            fill: "#FFFFFF"
        }, true);
        parent.appendChild(rect);
    };

    /**
     * Adds a linear gradient to a defs tag.
     * Returns a canvas gradient object that has a reference to it's parent def
     */
    ctx.prototype.createLinearGradient = function (x1, y1, x2, y2) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.createLinearGradient(x1, y1, x2, y2);
        }

        var grad = this.__createElement("linearGradient", {
            id: randomString(this.__ids),
            x1: x1 + "px",
            x2: x2 + "px",
            y1: y1 + "px",
            y2: y2 + "px",
            "gradientUnits": "userSpaceOnUse"
        }, false);
        this.__defs.appendChild(grad);
        return new CanvasGradient(grad, this);
    };

    /**
     * Adds a radial gradient to a defs tag.
     * Returns a canvas gradient object that has a reference to it's parent def
     */
    ctx.prototype.createRadialGradient = function (x0, y0, r0, x1, y1, r1) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
        }

        var grad = this.__createElement("radialGradient", {
            id: randomString(this.__ids),
            cx: x1 + "px",
            cy: y1 + "px",
            r: r1 + "px",
            fx: x0 + "px",
            fy: y0 + "px",
            "gradientUnits": "userSpaceOnUse"
        }, false);
        this.__defs.appendChild(grad);
        return new CanvasGradient(grad, this);

    };

    /**
     * Parses the font string and returns svg mapping
     * @private
     */
    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-z0-9]+?)\s*$/i;
        var fontPart = regex.exec(this.font);
        var data = {
            style: fontPart[1] || 'normal',
            size: fontPart[4] || '10px',
            family: fontPart[6] || 'sans-serif',
            weight: fontPart[3] || 'normal',
            decoration: fontPart[2] || 'normal',
            href: null
        };

        //canvas doesn't support underline natively, but we can pass this attribute
        if (this.__fontUnderline === "underline") {
            data.decoration = "underline";
        }

        //canvas also doesn't support linking, but we can pass this as well
        if (this.__fontHref) {
            data.href = this.__fontHref;
        }

        return data;
    };

    /**
     * Helper to link text fragments
     * @param font
     * @param element
     * @return {*}
     * @private
     */
    ctx.prototype.__wrapTextLink = function (font, element) {
        if (font.href) {
            var a = this.__createElement("a");
            a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
            a.appendChild(element);
            return a;
        }
        return element;
    };

    /**
     * Fills or strokes text
     * @param text
     * @param x
     * @param y
     * @param action - stroke or fill
     * @private
     */
    ctx.prototype.__applyText = function (text, x, y, action) {
        var font = this.__parseFont(),
            parent = this.__closestGroupOrSvg(),
            textElement = this.__createElement("text", {
                "font-family": font.family,
                "font-size": font.size,
                "font-style": font.style,
                "font-weight": font.weight,
                "text-decoration": font.decoration,
                "x": x,
                "y": y,
                "text-anchor": getTextAnchor(this.textAlign),
                "dominant-baseline": getDominantBaseline(this.textBaseline)
            }, true);

        textElement.appendChild(this.__document.createTextNode(text));
        this.__currentElement = textElement;
        this.__applyStyleToCurrentElement(action);
        parent.appendChild(this.__wrapTextLink(font, textElement));
    };

    /**
     * Creates a text element
     * @param text
     * @param x
     * @param y
     */
    ctx.prototype.fillText = function (text, x, y) {
        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.fillText(text, x, y);
        }

        this.__applyText(text, x, y, "fill");
    };

    /**
     * Strokes text
     * @param text
     * @param x
     * @param y
     */
    ctx.prototype.strokeText = function (text, x, y) {
        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.fillText(strokeText, x, y);
        }

        this.__applyText(text, x, y, "stroke");
    };

    /**
     * No need to implement this for svg.
     * @param text
     * @return {TextMetrics}
     */
    ctx.prototype.measureText = function (text) {
        this.__ctx.font = this.font;
        return this.__ctx.measureText(text);
    };

    /**
     *  Arc command!
     */
    ctx.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwise) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        }

        // in canvas no circle is drawn if no angle is provided.
        if (startAngle === endAngle) {
            return;
        }
        startAngle = startAngle % (2 * Math.PI);
        endAngle = endAngle % (2 * Math.PI);
        if (startAngle === endAngle) {
            //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);
        }
        var endX = x + radius * Math.cos(endAngle),
            endY = y + radius * Math.sin(endAngle),
            startX = x + radius * Math.cos(startAngle),
            startY = y + radius * Math.sin(startAngle),
            sweepFlag = counterClockwise ? 0 : 1,
            largeArcFlag = 0,
            diff = endAngle - startAngle;

        // https://github.com/gliffy/canvas2svg/issues/4
        if (diff < 0) {
            diff += 2 * Math.PI;
        }

        if (counterClockwise) {
            largeArcFlag = diff > Math.PI ? 0 : 1;
        } else {
            largeArcFlag = diff > Math.PI ? 1 : 0;
        }

        this.lineTo(startX, startY);
        this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
            { rx: radius, ry: radius, xAxisRotation: 0, largeArcFlag: largeArcFlag, sweepFlag: sweepFlag, endX: endX, endY: endY }));

        this.__currentPosition = { x: endX, y: endY };
    };

    /**
     * Generates a ClipPath from the clip command.
     */
    ctx.prototype.clip = function () {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.clip();
        }


        var group = this.__closestGroupOrSvg(),
            clipPath = this.__createElement("clipPath"),
            id = randomString(this.__ids),
            newGroup = this.__createElement("g");

        this.__applyCurrentDefaultPath();
        group.removeChild(this.__currentElement);
        clipPath.setAttribute("id", id);
        clipPath.appendChild(this.__currentElement);

        this.__defs.appendChild(clipPath);

        //set the clip path to this group
        group.setAttribute("clip-path", format("url(#{id})", { id: id }));

        //clip paths can be scaled and transformed, we need to add another wrapper group to avoid later transformations
        // to this path
        group.appendChild(newGroup);

        this.__currentElement = newGroup;

    };

    /**
     * Draws a canvas, image or mock context to this canvas.
     * 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
     */
    ctx.prototype.drawImage = function () {



        //convert arguments to a real array
        var args = Array.prototype.slice.call(arguments),
            image = args[0],
            dx, dy, dw, dh, sx = 0, sy = 0, sw, sh, parent, svg, defs, group,
            currentElement, svgImage, canvas, context, id;

        if (args.length === 3) {
            dx = args[1];
            dy = args[2];
            sw = image.width;
            sh = image.height;
            dw = sw;
            dh = sh;
        } else if (args.length === 5) {
            dx = args[1];
            dy = args[2];
            dw = args[3];
            dh = args[4];
            sw = image.width;
            sh = image.height;
        } else if (args.length === 9) {
            sx = args[1];
            sy = args[2];
            sw = args[3];
            sh = args[4];
            dx = args[5];
            dy = args[6];
            dw = args[7];
            dh = args[8];
        } else {
            throw new Error("Invalid number of arguments passed to drawImage: " + arguments.length);
        }

        parent = this.__closestGroupOrSvg();
        currentElement = this.__currentElement;
        var translateDirective = "translate(" + dx + ", " + dy + ")";
        if (image instanceof ctx) {
            //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().cloneNode(true);
            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) {
                    //save original transform
                    var originTransform = group.getAttribute("transform");
                    var transformDirective;
                    if (originTransform) {
                        transformDirective = originTransform + " " + translateDirective;
                    } else {
                        transformDirective = translateDirective;
                    }
                    group.setAttribute("transform", transformDirective);
                    parent.appendChild(group);
                }
            }
        } else if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
            //canvas or image
            svgImage = this.__createElement("image");
            svgImage.setAttribute("width", dw);
            svgImage.setAttribute("height", dh);
            svgImage.setAttribute("preserveAspectRatio", "none");

            if (sx || sy || sw !== image.width || sh !== image.height) {
                //crop the image using a temporary canvas
                canvas = this.__document.createElement("canvas");
                canvas.width = dw;
                canvas.height = dh;
                context = canvas.getContext("2d");
                context.drawImage(image, sx, sy, sw, sh, 0, 0, dw, dh);
                image = canvas;
            }
            svgImage.setAttribute("transform", translateDirective);
            svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
                image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
            parent.appendChild(svgImage);
        }
    };

    /**
     * Generates a pattern tag
     */
    ctx.prototype.createPattern = function (image, repetition) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.createPattern(image, repetition);
        }

        var pattern = this.__document.createElementNS("http://www.w3.org/2000/svg", "pattern"), id = randomString(this.__ids),
            img;
        pattern.setAttribute("id", id);
        pattern.setAttribute("width", image.width);
        pattern.setAttribute("height", image.height);
        if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
            img = this.__document.createElementNS("http://www.w3.org/2000/svg", "image");
            img.setAttribute("width", image.width);
            img.setAttribute("height", image.height);
            img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
                image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
            pattern.appendChild(img);
            this.__defs.appendChild(pattern);
        } else if (image instanceof ctx) {
            pattern.appendChild(image.__root.childNodes[1]);
            this.__defs.appendChild(pattern);
        }
        return new CanvasPattern(pattern, this);
    };

    ctx.prototype.setLineDash = function (dashArray) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.setLineDash(dashArray);
        }

        if (dashArray && dashArray.length > 0) {
            this.lineDash = dashArray.join(",");
        } else {
            this.lineDash = null;
        }
    };

    /* Chart JS v4.2.1 Compatibility */
    ctx.prototype.getContext = function (contextId) {
        if (String(contextId).toUpperCase() === '2D') {
            return this
        }
        return null
    }
    ctx.prototype.getContext2d = function (contextId) {
        return this.__ctx;
    }
    ctx.prototype.style = function () {
        //console.log('ctx.prototype.style');
        // console.log(this.__canvas.style);
        return this.__canvas.style;
    }
    ctx.prototype.getAttribute = function (prop_name) {
        return this[prop_name]
    }
    ctx.prototype.resetTransform = function () {
        this.setTransform(1, 0, 0, 1, 0, 0);
    }


    /**
     * Not yet implemented
     */
    ctx.prototype.drawFocusRing = function () { };
    ctx.prototype.createImageData = function () { };
    ctx.prototype.getImageData = function () { };
    ctx.prototype.putImageData = function () { };
    ctx.prototype.globalCompositeOperation = function () { };
    ctx.prototype.setTransform = function () { };
    // ctx.prototype.resetTransform = function () { };
    ctx.prototype.addEventListener = function (type, listener, eventListenerOptions) { };

    //add options for alternative namespace
    if (typeof window === "object") {
        window.C2S = ctx;
    }

    // CommonJS/Browserify
    if (typeof module === "object" && typeof module.exports === "object") {
        module.exports = ctx;
    }

}());

@SamukaDEV
Copy link

Nao tenho certeza, mas acho que isso pode ser essa função de "ctx.prototype.resetTransform"?
nao cheguei a fazer grandes testes com as funções que adicionei, se nao me engano essa estava no meio de uma delas, talvez possa ser isso pelo exemplo que vc mandou, sem testes é dificil saber o que esta acontecendo!

Já tentou remover ou melhorar essa função para ver se pode ter a ver com algo relacionado ao seu exemplo?

@insinfo
Copy link
Author

insinfo commented Apr 18, 2023

I made some changes in canvas2svg.js and now the rendering in SVG and Canvas look identical, the only strange thing is that the chart pie circle has a cut at the bottom, I don't know why

image

https://github.com/insinfo/canvas2svg

; (function () {
    "use strict";

    var STYLES, ctx, CanvasGradient, CanvasPattern, namedEntities;


    //helper function to format a string
    function format(str, args) {
        var keys = Object.keys(args), i;
        for (i = 0; i < keys.length; i++) {
            str = str.replace(new RegExp("\\{" + keys[i] + "\\}", "gi"), args[keys[i]]);
        }
        return str;
    }

    //helper function that generates a random string
    function randomString(holder) {
        var chars, randomstring, i;
        if (!holder) {
            throw new Error("cannot create a random attribute name for an undefined object");
        }
        chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
        randomstring = "";
        do {
            randomstring = "";
            for (i = 0; i < 12; i++) {
                randomstring += chars[Math.floor(Math.random() * chars.length)];
            }
        } while (holder[randomstring]);
        return randomstring;
    }

    //helper function to map named to numbered entities
    function createNamedToNumberedLookup(items, radix) {
        var i, entity, lookup = {}, base10, base16;
        items = items.split(',');
        radix = radix || 10;
        // Map from named to numbered entities.
        for (i = 0; i < items.length; i += 2) {
            entity = '&' + items[i + 1] + ';';
            base10 = parseInt(items[i], radix);
            lookup[entity] = '&#' + base10 + ';';
        }
        //FF and IE need to create a regex from hex values ie &nbsp; == \xa0
        lookup["\\xa0"] = '&#160;';
        return lookup;
    }

    //helper function to map canvas-textAlign to svg-textAnchor
    function getTextAnchor(textAlign) {
        //TODO: support rtl languages
        var mapping = { "left": "start", "right": "end", "center": "middle", "start": "start", "end": "end" };
        return mapping[textAlign] || mapping.start;
    }

    //helper function to map canvas-textBaseline to svg-dominantBaseline
    function getDominantBaseline(textBaseline) {
        //INFO: not supported in all browsers
        var mapping = { "alphabetic": "alphabetic", "hanging": "hanging", "top": "text-before-edge", "bottom": "text-after-edge", "middle": "central" };
        return mapping[textBaseline] || mapping.alphabetic;
    }

    // Unpack entities lookup where the numbers are in radix 32 to reduce the size
    // entity mapping courtesy of tinymce
    namedEntities = createNamedToNumberedLookup(
        '50,nbsp,51,iexcl,52,cent,53,pound,54,curren,55,yen,56,brvbar,57,sect,58,uml,59,copy,' +
        '5a,ordf,5b,laquo,5c,not,5d,shy,5e,reg,5f,macr,5g,deg,5h,plusmn,5i,sup2,5j,sup3,5k,acute,' +
        '5l,micro,5m,para,5n,middot,5o,cedil,5p,sup1,5q,ordm,5r,raquo,5s,frac14,5t,frac12,5u,frac34,' +
        '5v,iquest,60,Agrave,61,Aacute,62,Acirc,63,Atilde,64,Auml,65,Aring,66,AElig,67,Ccedil,' +
        '68,Egrave,69,Eacute,6a,Ecirc,6b,Euml,6c,Igrave,6d,Iacute,6e,Icirc,6f,Iuml,6g,ETH,6h,Ntilde,' +
        '6i,Ograve,6j,Oacute,6k,Ocirc,6l,Otilde,6m,Ouml,6n,times,6o,Oslash,6p,Ugrave,6q,Uacute,' +
        '6r,Ucirc,6s,Uuml,6t,Yacute,6u,THORN,6v,szlig,70,agrave,71,aacute,72,acirc,73,atilde,74,auml,' +
        '75,aring,76,aelig,77,ccedil,78,egrave,79,eacute,7a,ecirc,7b,euml,7c,igrave,7d,iacute,7e,icirc,' +
        '7f,iuml,7g,eth,7h,ntilde,7i,ograve,7j,oacute,7k,ocirc,7l,otilde,7m,ouml,7n,divide,7o,oslash,' +
        '7p,ugrave,7q,uacute,7r,ucirc,7s,uuml,7t,yacute,7u,thorn,7v,yuml,ci,fnof,sh,Alpha,si,Beta,' +
        'sj,Gamma,sk,Delta,sl,Epsilon,sm,Zeta,sn,Eta,so,Theta,sp,Iota,sq,Kappa,sr,Lambda,ss,Mu,' +
        'st,Nu,su,Xi,sv,Omicron,t0,Pi,t1,Rho,t3,Sigma,t4,Tau,t5,Upsilon,t6,Phi,t7,Chi,t8,Psi,' +
        't9,Omega,th,alpha,ti,beta,tj,gamma,tk,delta,tl,epsilon,tm,zeta,tn,eta,to,theta,tp,iota,' +
        'tq,kappa,tr,lambda,ts,mu,tt,nu,tu,xi,tv,omicron,u0,pi,u1,rho,u2,sigmaf,u3,sigma,u4,tau,' +
        'u5,upsilon,u6,phi,u7,chi,u8,psi,u9,omega,uh,thetasym,ui,upsih,um,piv,812,bull,816,hellip,' +
        '81i,prime,81j,Prime,81u,oline,824,frasl,88o,weierp,88h,image,88s,real,892,trade,89l,alefsym,' +
        '8cg,larr,8ch,uarr,8ci,rarr,8cj,darr,8ck,harr,8dl,crarr,8eg,lArr,8eh,uArr,8ei,rArr,8ej,dArr,' +
        '8ek,hArr,8g0,forall,8g2,part,8g3,exist,8g5,empty,8g7,nabla,8g8,isin,8g9,notin,8gb,ni,8gf,prod,' +
        '8gh,sum,8gi,minus,8gn,lowast,8gq,radic,8gt,prop,8gu,infin,8h0,ang,8h7,and,8h8,or,8h9,cap,8ha,cup,' +
        '8hb,int,8hk,there4,8hs,sim,8i5,cong,8i8,asymp,8j0,ne,8j1,equiv,8j4,le,8j5,ge,8k2,sub,8k3,sup,8k4,' +
        'nsub,8k6,sube,8k7,supe,8kl,oplus,8kn,otimes,8l5,perp,8m5,sdot,8o8,lceil,8o9,rceil,8oa,lfloor,8ob,' +
        'rfloor,8p9,lang,8pa,rang,9ea,loz,9j0,spades,9j3,clubs,9j5,hearts,9j6,diams,ai,OElig,aj,oelig,b0,' +
        'Scaron,b1,scaron,bo,Yuml,m6,circ,ms,tilde,802,ensp,803,emsp,809,thinsp,80c,zwnj,80d,zwj,80e,lrm,' +
        '80f,rlm,80j,ndash,80k,mdash,80o,lsquo,80p,rsquo,80q,sbquo,80s,ldquo,80t,rdquo,80u,bdquo,810,dagger,' +
        '811,Dagger,81g,permil,81p,lsaquo,81q,rsaquo,85c,euro', 32);


    //Some basic mappings for attributes and default values.
    STYLES = {
        "strokeStyle": {
            svgAttr: "stroke", //corresponding svg attribute
            canvas: "#000000", //canvas default
            svg: "none",       //svg default
            apply: "stroke"    //apply on stroke() or fill()
        },
        "fillStyle": {
            svgAttr: "fill",
            canvas: "#000000",
            svg: null, //svg default is black, but we need to special case this to handle canvas stroke without fill
            apply: "fill"
        },
        "lineCap": {
            svgAttr: "stroke-linecap",
            canvas: "butt",
            svg: "butt",
            apply: "stroke"
        },
        "lineJoin": {
            svgAttr: "stroke-linejoin",
            canvas: "miter",
            svg: "miter",
            apply: "stroke"
        },
        "miterLimit": {
            svgAttr: "stroke-miterlimit",
            canvas: 10,
            svg: 4,
            apply: "stroke"
        },
        "lineWidth": {
            svgAttr: "stroke-width",
            canvas: 1,
            svg: 1,
            apply: "stroke"
        },
        "globalAlpha": {
            svgAttr: "opacity",
            canvas: 1,
            svg: 1,
            apply: "fill stroke"
        },
        "font": {
            //font converts to multiple svg attributes, there is custom logic for this
            canvas: "10px sans-serif"
        },
        "shadowColor": {
            canvas: "#000000"
        },
        "shadowOffsetX": {
            canvas: 0
        },
        "shadowOffsetY": {
            canvas: 0
        },
        "shadowBlur": {
            canvas: 0
        },
        "textAlign": {
            canvas: "start"
        },
        "textBaseline": {
            canvas: "alphabetic"
        },
        "lineDash": {
            svgAttr: "stroke-dasharray",
            canvas: [],
            svg: null,
            apply: "stroke"
        }
    };

    /**
     *
     * @param gradientNode - reference to the gradient
     * @constructor
     */
    CanvasGradient = function (gradientNode, ctx) {
        this.__root = gradientNode;
        this.__ctx = ctx;
    };

    /**
     * Adds a color stop to the gradient root
     */
    CanvasGradient.prototype.addColorStop = function (offset, color) {
        var stop = this.__ctx.__createElement("stop"), regex, matches;
        stop.setAttribute("offset", offset);
        if (color.indexOf("rgba") !== -1) {
            //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;
            matches = regex.exec(color);
            stop.setAttribute("stop-color", format("rgb({r},{g},{b})", { r: matches[1], g: matches[2], b: matches[3] }));
            stop.setAttribute("stop-opacity", matches[4]);
        } else {
            stop.setAttribute("stop-color", color);
        }
        this.__root.appendChild(stop);
    };

    CanvasPattern = function (pattern, ctx) {
        this.__root = pattern;
        this.__ctx = ctx;
    };

    /**
     * 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)
     * document - the document object (defaults to the current document)
     */
    ctx = function (o) {
        var defaultOptions = { width: 500, height: 500, enableMirroring: false }, options;

        //keep support for this way of calling C2S: new C2S(width,height)
        if (arguments.length > 1) {
            options = defaultOptions;
            options.width = arguments[0];
            options.height = arguments[1];
        } else if (!o) {
            options = defaultOptions;
        } else {
            options = o;
        }

        if (!(this instanceof ctx)) {
            //did someone call this without new?
            return new ctx(options);
        }

        //setup options
        this.width = options.width || defaultOptions.width;
        this.height = options.height || defaultOptions.height;
        this.enableMirroring = options.enableMirroring !== undefined ? options.enableMirroring : defaultOptions.enableMirroring;

        this.canvas = this;   ///point back to this instance!
        this.__document = options.document || document;

        // 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;
            this.__canvas = options.canvas;
        } else {
            this.__canvas = this.__document.createElement("canvas");
            this.__ctx = this.__canvas.getContext("2d");
        }

        this.__setDefaultStyles();
        this.__stack = [this.__getStyleState()];
        this.__groupStack = [];

        //the root svg element
        this.__root = this.__document.createElementNS("http://www.w3.org/2000/svg", "svg");
        this.__root.setAttribute("version", 1.1);
        this.__root.setAttribute("xmlns", "http://www.w3.org/2000/svg");
        this.__root.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
        this.__root.setAttribute("width", this.width);
        this.__root.setAttribute("height", this.height);

        //make sure we don't generate the same ids in defs
        this.__ids = {};

        //defs tag
        this.__defs = this.__document.createElementNS("http://www.w3.org/2000/svg", "defs");
        this.__root.appendChild(this.__defs);

        //also add a group child. the svg element can't use the transform attribute
        this.__currentElement = this.__document.createElementNS("http://www.w3.org/2000/svg", "g");
        this.__root.appendChild(this.__currentElement);
    };

    // Object.defineProperty(ctx.prototype, "fillStyle", {
    //     get: function fillStyle() {
    //     }
    // });

    // isaque adicionou isso para funcionar com ChartJS
    ctx.prototype.__defineGetter__("fillStyle", function () {
        //console.log('ctx.prototype.__defineGetter__');
        return this._fillStyle;
    });
    ctx.prototype.__defineSetter__("fillStyle", function (val) {
        //console.log(`ctx.prototype.__defineSetter ${val}`);
        this.__ctx.fillStyle = val;
        this._fillStyle = val;
    });
    ctx.prototype.__defineGetter__("strokeStyle", function () {
        return this._strokeStyle;
    });
    ctx.prototype.__defineSetter__("strokeStyle", function (val) {
        this.__ctx.strokeStyle = val;
        this._strokeStyle = val;
    });
    ctx.prototype.__defineGetter__("lineCap", function () {
        return this._lineCap;
    });
    ctx.prototype.__defineSetter__("lineCap", function (val) {
        this.__ctx.lineCap = val;
        this._lineCap = val;
    });
    ctx.prototype.__defineGetter__("lineJoin", function () {
        return this._lineJoin;
    });
    ctx.prototype.__defineSetter__("lineJoin", function (val) {
        this.__ctx.lineJoin = val;
        this._lineJoin = val;
    });
    ctx.prototype.__defineGetter__("miterLimit", function () {
        return this._miterLimit;
    });
    ctx.prototype.__defineSetter__("miterLimit", function (val) {
        this.__ctx.miterLimit = val;
        this._miterLimit = val;
    });
    ctx.prototype.__defineGetter__("lineWidth", function () {
        return this._lineWidth;
    });
    ctx.prototype.__defineSetter__("lineWidth", function (val) {
        this.__ctx.lineWidth = val;
        this._lineWidth = val;
    });
    ctx.prototype.__defineGetter__("globalAlpha", function () {
        return this._globalAlpha;
    });
    ctx.prototype.__defineSetter__("globalAlpha", function (val) {
        this.__ctx.globalAlpha = val;
        this._globalAlpha = val;
    });
    ctx.prototype.__defineGetter__("font", function () {
        return this._font;
    });
    ctx.prototype.__defineSetter__("font", function (val) {
        this.__ctx.font = val;
        this._font = val;
    });
    ctx.prototype.__defineGetter__("shadowColor", function () {
        return this._shadowColor;
    });
    ctx.prototype.__defineSetter__("shadowColor", function (val) {
        this.__ctx.shadowColor = val;
        this._shadowColor = val;
    });
    ctx.prototype.__defineGetter__("shadowOffsetX", function () {
        return this._shadowOffsetX;
    });
    ctx.prototype.__defineSetter__("shadowOffsetX", function (val) {
        this.__ctx.shadowOffsetX = val;
        this._shadowOffsetX = val;
    });
    ctx.prototype.__defineGetter__("shadowOffsetY", function () {
        return this._shadowOffsetY;
    });
    ctx.prototype.__defineSetter__("shadowOffsetY", function (val) {
        this.__ctx.shadowOffsetY = val;
        this._shadowOffsetY = val;
    });
    ctx.prototype.__defineGetter__("shadowBlur", function () {
        return this._shadowBlur;
    });
    ctx.prototype.__defineSetter__("shadowBlur", function (val) {
        this.__ctx.shadowBlur = val;
        this._shadowBlur = val;
    });
    ctx.prototype.__defineGetter__("textAlign", function () {
        return this._textAlign;
    });
    ctx.prototype.__defineSetter__("textAlign", function (val) {
        this.__ctx.textAlign = val;
        this._textAlign = val;
    });
    ctx.prototype.__defineGetter__("textBaseline", function () {
        return this._textBaseline;
    });
    ctx.prototype.__defineSetter__("textBaseline", function (val) {
        this.__ctx.textBaseline = val;
        this._textBaseline = val;
    });
    ctx.prototype.__defineGetter__("lineDash", function () {
        return this._lineDash;
    });
    ctx.prototype.__defineSetter__("lineDash", function (val) {
        this.__ctx.lineDash = val;
        this._lineDash = val;
    });
    ctx.prototype.__defineGetter__("filter", function () {
        return this._filter;
    });
    ctx.prototype.__defineSetter__("filter", function (val) {
        this.__ctx.filter = val;
        this._filter = val;
    });
    ctx.prototype.__defineGetter__("fontKerning", function () {
        return this._fontKerning;
    });
    ctx.prototype.__defineSetter__("fontKerning", function (val) {
        this.__ctx.fontKerning = val;
        this._fontKerning = val;
    });
    ctx.prototype.__defineGetter__("fontStretch", function () {
        return this._fontStretch;
    });
    ctx.prototype.__defineSetter__("fontStretch", function (val) {
        this.__ctx.fontStretch = val;
        this._fontStretch = val;
    });
    ctx.prototype.__defineGetter__("fontVariantCaps", function () {
        return this._fontVariantCaps;
    });
    ctx.prototype.__defineSetter__("fontVariantCaps", function (val) {
        this.__ctx.fontVariantCaps = val;
        this._fontVariantCaps = val;
    });
    ctx.prototype.__defineGetter__("direction", function () {
        return this._direction;
    });
    ctx.prototype.__defineSetter__("direction", function (val) {
        this.__ctx.direction = val;
        this._direction = val;
    });
    ctx.prototype.__defineGetter__("globalCompositeOperation", function () {
        return this._globalCompositeOperation;
    });
    ctx.prototype.__defineSetter__("globalCompositeOperation", function (val) {
        this.__ctx.globalCompositeOperation = val;
        this._globalCompositeOperation = val;
    });
    ctx.prototype.__defineGetter__("imageSmoothingEnabled", function () {
        return this._imageSmoothingEnabled;
    });
    ctx.prototype.__defineSetter__("imageSmoothingEnabled", function (val) {
        this.__ctx.imageSmoothingEnabled = val;
        this._imageSmoothingEnabled = val;
    });
    ctx.prototype.__defineGetter__("imageSmoothingQuality", function () {
        return this._imageSmoothingQuality;
    });
    ctx.prototype.__defineSetter__("imageSmoothingQuality", function (val) {
        this.__ctx.imageSmoothingQuality = val;
        this._imageSmoothingQuality = val;
    });
    ctx.prototype.__defineGetter__("letterSpacing", function () {
        return this._letterSpacing;
    });
    ctx.prototype.__defineSetter__("letterSpacing", function (val) {
        this.__ctx.letterSpacing = val;
        this._letterSpacing = val;
    });
    ctx.prototype.__defineGetter__("lineDashOffset", function () {
        return this._lineDashOffset;
    });
    ctx.prototype.__defineSetter__("lineDashOffset", function (val) {
        this.__ctx.lineDashOffset = val;
        this._lineDashOffset = val;
    });
    ctx.prototype.__defineGetter__("textRendering", function () {
        return this._textRendering;
    });
    ctx.prototype.__defineSetter__("textRendering", function (val) {
        this.__ctx.textRendering = val;
        this._textRendering = val;
    });
    ctx.prototype.__defineGetter__("wordSpacing", function () {
        return this._wordSpacing;
    });
    ctx.prototype.__defineSetter__("wordSpacing", function (val) {
        this.__ctx.wordSpacing = val;
        this._wordSpacing = val;
    });


    ctx.prototype.__defineGetter__("parentNode", function () {
        return this.__canvas.parentNode;
    });


    /**
     * Creates the specified svg element
     * @private
     */
    ctx.prototype.__createElement = function (elementName, properties, resetFill) {
        if (typeof properties === "undefined") {
            properties = {};
        }

        var element = this.__document.createElementNS("http://www.w3.org/2000/svg", elementName),
            keys = Object.keys(properties), i, key;
        if (resetFill) {
            //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("stroke", "none");
        }
        for (i = 0; i < keys.length; i++) {
            key = keys[i];
            element.setAttribute(key, properties[key]);
        }
        return element;
    };

    /**
     * Applies default canvas styles to the context
     * @private
     */
    ctx.prototype.__setDefaultStyles = function () {
        //console.log(`ctx.prototype.__setDefaultStyles `);
        //default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/
        var keys = Object.keys(STYLES), i, key;
        for (i = 0; i < keys.length; i++) {
            key = keys[i];
            this[key] = STYLES[key].canvas;
            //console.log(`ctx.prototype.__setDefaultStyles ${key} ${this[key]}`);
        }
    };

    /**
     * Applies styles on restore
     * @param styleState
     * @private
     */
    ctx.prototype.__applyStyleState = function (styleState) {
        // console.log(`ctx.prototype.__applyStyleState`);
        var keys = Object.keys(styleState), i, key;
        for (i = 0; i < keys.length; i++) {
            key = keys[i];
            this[key] = styleState[key];
        }
    };

    /**
     * Gets the current style state
     * @return {Object}
     * @private
     */
    ctx.prototype.__getStyleState = function () {
        // console.log(`ctx.prototype.__getStyleState`);
        var i, styleState = {}, keys = Object.keys(STYLES), key;
        for (i = 0; i < keys.length; i++) {
            key = keys[i];
            styleState[key] = this[key];
        }
        return styleState;
    };

    /**
     * Apples the current styles to the current SVG element. On "ctx.fill" or "ctx.stroke"
     * @param type
     * @private
     */
    ctx.prototype.__applyStyleToCurrentElement = function (type) {
        //console.log(`ctx.prototype.__applyStyleToCurrentElement ${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;
        for (i = 0; i < keys.length; i++) {
            style = STYLES[keys[i]];
            value = this[keys[i]];
            // console.log(`ctx.prototype.__applyStyleToCurrentElement value ${keys[i]} ${value}`);
            if (style.apply) {
                //is this a gradient or pattern?
                if (value instanceof CanvasPattern) {
                    //pattern
                    if (value.__ctx) {
                        //copy over defs
                        while (value.__ctx.__defs.childNodes.length) {
                            id = value.__ctx.__defs.childNodes[0].getAttribute("id");
                            this.__ids[id] = id;
                            this.__defs.appendChild(value.__ctx.__defs.childNodes[0]);
                        }
                    }
                    currentElement.setAttribute(style.apply, format("url(#{id})", { id: value.__root.getAttribute("id") }));
                }
                else if (value instanceof CanvasGradient) {
                    //gradient
                    currentElement.setAttribute(style.apply, format("url(#{id})", { id: value.__root.getAttribute("id") }));
                } else if (style.apply.indexOf(type) !== -1 && style.svg !== value) {
                    if ((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1) {
                        //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;
                        matches = regex.exec(value);
                        currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", { r: matches[1], g: matches[2], b: matches[3] }));
                        //should take globalAlpha here
                        var opacity = matches[4];
                        var globalAlpha = this.globalAlpha;
                        if (globalAlpha != null) {
                            opacity *= globalAlpha;
                        }
                        currentElement.setAttribute(style.svgAttr + "-opacity", opacity);
                    } else {
                        var attr = style.svgAttr;
                        if (keys[i] === 'globalAlpha') {
                            attr = type + '-' + style.svgAttr;
                            if (currentElement.getAttribute(attr)) {
                                //fill-opacity or stroke-opacity has already been set by stroke or fill.
                                continue;
                            }
                        }
                        //otherwise only update attribute if right type, and not svg default
                        currentElement.setAttribute(attr, value);
                    }
                }
            }
        }
    };

    /**
     * Will return the closest group or svg node. May return the current element.
     * @private
     */
    ctx.prototype.__closestGroupOrSvg = function (node) {
        node = node || this.__currentElement;
        if (node.nodeName === "g" || node.nodeName === "svg") {
            return node;
        } else {
            return this.__closestGroupOrSvg(node.parentNode);
        }
    };


    /**
     * Returns the serialized value of the svg so far
     * @param fixNamedEntities - Standalone SVG doesn't support named entities, which document.createTextNode encodes.
     *                           If true, we attempt to find all named entities and encode it as a numeric entity.
     * @return serialized svg
     */
    ctx.prototype.getSerializedSvg = function (fixNamedEntities) {
        var serialized = new XMLSerializer().serializeToString(this.__root),
            keys, i, key, value, regexp, xmlns;

        //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;
        if (xmlns.test(serialized)) {
            serialized = serialized.replace('xmlns="http://www.w3.org/2000/svg', 'xmlns:xlink="http://www.w3.org/1999/xlink');
        }

        if (fixNamedEntities) {
            keys = Object.keys(namedEntities);
            //loop over each named entity and replace with the proper equivalent.
            for (i = 0; i < keys.length; i++) {
                key = keys[i];
                value = namedEntities[key];
                regexp = new RegExp(key, "gi");
                if (regexp.test(serialized)) {
                    serialized = serialized.replace(regexp, value);
                }
            }
        }

        return serialized;
    };


    /**
     * Returns the root svg
     * @return
     */
    ctx.prototype.getSvg = function () {
        return this.__root;
    };
    /**
     * Will generate a group tag.
     */
    ctx.prototype.save = function () {
        var group = this.__createElement("g");
        var parent = this.__closestGroupOrSvg();
        this.__groupStack.push(parent);
        parent.appendChild(group);
        this.__currentElement = group;
        this.__stack.push(this.__getStyleState());
    };
    /**
     * Sets current element to parent, or just root if already root
     */
    ctx.prototype.restore = function () {
        this.__currentElement = this.__groupStack.pop();
        this.__currentElementsToStyle = null;
        //Clearing canvas will make the poped group invalid, currentElement is set to the root group node.
        if (!this.__currentElement) {
            this.__currentElement = this.__root.childNodes[1];
        }
        var state = this.__stack.pop();
        this.__applyStyleState(state);
    };

    /**
     * Helper method to add transform
     * @private
     */
    ctx.prototype.__addTransform = function (t) {
        //if the current element has siblings, add another group
        var parent = this.__closestGroupOrSvg();
        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");
            parent.appendChild(group);
            this.__currentElement = group;
        }

        var transform = this.__currentElement.getAttribute("transform");
        if (transform) {
            transform += " ";
        } else {
            transform = "";
        }
        transform += t;
        this.__currentElement.setAttribute("transform", transform);
    };

    /**
     *  scales the current element
     */
    ctx.prototype.scale = function (x, y) {

        //isaque adicionou
        if (this.__ctx) {
            console.log(`ctx.prototype.scale ${x} ${y}`);
            this.__ctx.scale(x, y);
        }

        this.__scale(x, y);
    };

    /**
    * __scale internal to SVG scales the current element
    */
    ctx.prototype.__scale = function (x, y) {

        if (y === undefined) {
            y = x;
        }
        this.__addTransform(format("scale({x},{y})", { x: x, y: y }));
    };

    /**
     * rotates the current element
     */
    ctx.prototype.rotate = function (angle) {

        //isaque adicionou
        if (this.__ctx) {
            console.log(`ctx.prototype.rotate ${angle}`);
            this.__ctx.rotate(angle);
        }

        this.__rotate(angle);
    };

    /**
    * __rotate internal to SVG rotates the current element
    */
    ctx.prototype.__rotate = function (angle) {
        var degrees = (angle * 180 / Math.PI);
        this.__addTransform(format("rotate({angle},{cx},{cy})", { angle: degrees, cx: 0, cy: 0 }));
    };

    /**
     * translates the current element
     */
    ctx.prototype.translate = function (x, y) {

        //isaque adicionou
        if (this.__ctx) {
            console.log(`ctx.prototype.translate ${x} ${y}`);
            this.__ctx.translate(x, y);
        }

        this.__translate(x, y);
    };

    /**
    * __translate internal to SVG translates the current element
    */
    ctx.prototype.__translate = function (x, y) {
        this.__addTransform(format("translate({x},{y})", { x: x, y: y }));
    };

    /**
     * applies a transform to the current element
     */
    ctx.prototype.transform = function (a, b, c, d, e, f) {

        //isaque adicionou
        if (this.__ctx) {
            console.log(`ctx.prototype.transform ${a} ${b}`);
            this.__ctx.transform(a, b, c, d, e, f);
        }

        this.__transform(a, b, c, d, e, f);
    };

    /**
    * __transform internal to SVG applies a transform to the current element
    */
    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 }));
    };

    /**
     * Create a new Path Element
     */
    ctx.prototype.beginPath = function () {

        //isaque adicionou
        if (this.__ctx) {
            console.log(`ctx.prototype.beginPath `);
            this.__ctx.beginPath();
        }
        this.__beginPath();
    };

    /**
     * __beginPath internal to SVG Create a new Path Element
     */
    ctx.prototype.__beginPath = function () {

        var path, parent;

        // Note that there is only one current default path, it is not part of the drawing state.
        // See also: https://html.spec.whatwg.org/multipage/scripting.html#current-default-path
        this.__currentDefaultPath = "";
        this.__currentPosition = {};

        path = this.__createElement("path", {}, true);
        parent = this.__closestGroupOrSvg();
        parent.appendChild(path);
        this.__currentElement = path;
    };

    /**
     * Helper function to apply currentDefaultPath to current path element
     * @private
     */
    ctx.prototype.__applyCurrentDefaultPath = function () {
        var currentElement = this.__currentElement;
        if (currentElement.nodeName === "path") {
            currentElement.setAttribute("d", this.__currentDefaultPath);
        } else {
            console.error("Attempted to apply path command to node", currentElement.nodeName);
        }
    };

    /**
     * Helper function to add path command
     * @private
     */
    ctx.prototype.__addPathCommand = function (command) {
        this.__currentDefaultPath += " ";
        this.__currentDefaultPath += command;
    };

    /**
     * Adds the move command to the current path element,
     * if the currentPathElement is not empty create a new path element
     */
    ctx.prototype.moveTo = function (x, y) {
        //isaque adicionou
        if (this.__ctx) {
            console.log(`ctx.prototype.moveTo `);
            this.__ctx.moveTo(x, y);
        }

        this.__moveTo(x, y);
    };

    /**
    * __moveTo internal to SVG  Adds the move command to the current path element,
    * if the currentPathElement is not empty create a new path element
    */
    ctx.prototype.__moveTo = function (x, y) {

        if (this.__currentElement.nodeName !== "path") {
            this.__beginPath();
        }

        // creates a new subpath with the given point
        this.__currentPosition = { x: x, y: y };
        this.__addPathCommand(format("M {x} {y}", { x: x, y: y }));
    };

    /**
     * Closes the current path
     */
    ctx.prototype.closePath = function () {

        //isaque adicionou
        if (this.__ctx) {
            console.log(`ctx.prototype.closePath `);
            this.__ctx.closePath();
        }
        this.__closePath();

    };

    /**
   * __closePath internal to SVG Closes the current path
   */
    ctx.prototype.__closePath = function () {

        if (this.__currentDefaultPath) {
            this.__addPathCommand("Z");
        }
    };

    /**
     * Adds a line to command
     */
    ctx.prototype.lineTo = function (x, y) {

        //isaque adicionou
        if (this.__ctx) {
            console.log(`ctx.prototype.lineTo `);
            this.__ctx.lineTo(x, y);
        }

        this.__lineTo(x, y);
    };

    /**
     * __lineTo internal for SVG 
     * Adds a line to command
     */
    ctx.prototype.__lineTo = function (x, y) {

        this.__currentPosition = { x: x, y: y };
        if (this.__currentDefaultPath.indexOf('M') > -1) {
            this.__addPathCommand(format("L {x} {y}", { x: x, y: y }));
        } else {
            this.__addPathCommand(format("M {x} {y}", { x: x, y: y }));
        }
    };

    /**
     * Add a bezier command
     */
    ctx.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {

        //isaque adicionou
        if (this.__ctx) {
            console.log(`ctx.prototype.bezierCurveTo `);
            this.__ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
        }

        this.__bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
    };

    /**
     * __bezierCurveTo internal to SVG
     * Add a bezier command
     */
    ctx.prototype.__bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {

        this.__currentPosition = { x: x, y: y };
        this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",
            { cp1x: cp1x, cp1y: cp1y, cp2x: cp2x, cp2y: cp2y, x: x, y: y }));
    };

    /**
     * Adds a quadratic curve to command
     */
    ctx.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {

        //isaque adicionou
        if (this.__ctx) {
            console.log(`ctx.prototype.quadraticCurveTo `);
            this.__ctx.quadraticCurveTo(cpx, cpy, x, y);
        }

        this.__quadraticCurveTo(cpx, cpy, x, y);
    };

    /**
     * __quadraticCurveTo internal to SVG
     * Adds a quadratic curve to command
     */
    ctx.prototype.__quadraticCurveTo = function (cpx, cpy, x, y) {

        this.__currentPosition = { x: x, y: y };
        this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", { cpx: cpx, cpy: cpy, x: x, y: y }));
    };


    /**
     * Return a new normalized vector of given vector
     */
    var normalize = function (vector) {
        console.log(`ctx.prototype.normalize `);
        var len = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
        return [vector[0] / len, vector[1] / len];
    };

    /**
     * Adds the arcTo to the current path
     *
     * @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto
     */
    ctx.prototype.arcTo = function (x1, y1, x2, y2, radius) {

        //isaque adicionou 
        if (this.__ctx) {
            console.log(`ctx.prototype.arcTo `);
            this.__ctx.arcTo(x1, y1, x2, y2, radius);
        }

        this.__arcTo(x1, y1, x2, y2, radius);
    };

    /**
     * __arcTo internal to SVG
     * Adds the arcTo to the current path
     *
     * @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto
     */
    ctx.prototype.__arcTo = function (x1, y1, x2, y2, radius) {

        // Let the point (x0, y0) be the last point in the subpath.
        var x0 = this.__currentPosition && this.__currentPosition.x;
        var y0 = this.__currentPosition && this.__currentPosition.y;

        // First ensure there is a subpath for (x1, y1).
        if (typeof x0 == "undefined" || typeof y0 == "undefined") {
            return;
        }

        // Negative values for radius must cause the implementation to throw an IndexSizeError exception.
        if (radius < 0) {
            throw new Error("IndexSizeError: The radius provided (" + radius + ") is negative.");
        }

        // If the point (x0, y0) is equal to the point (x1, y1),
        // or if the point (x1, y1) is equal to the point (x2, y2),
        // or if the radius radius is zero,
        // then the method must add the point (x1, y1) to the subpath,
        // and connect that point to the previous point (x0, y0) by a straight line.
        if (((x0 === x1) && (y0 === y1))
            || ((x1 === x2) && (y1 === y2))
            || (radius === 0)) {
            this.__lineTo(x1, y1);
            return;
        }

        // Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a single straight line,
        // then the method must add the point (x1, y1) to the subpath,
        // and connect that point to the previous point (x0, y0) by a straight line.
        var unit_vec_p1_p0 = normalize([x0 - x1, y0 - y1]);
        var unit_vec_p1_p2 = normalize([x2 - x1, y2 - y1]);
        if (unit_vec_p1_p0[0] * unit_vec_p1_p2[1] === unit_vec_p1_p0[1] * unit_vec_p1_p2[0]) {
            this.__lineTo(x1, y1);
            return;
        }

        // Otherwise, let The Arc be the shortest arc given by circumference of the circle that has radius radius,
        // and that has one point tangent to the half-infinite line that crosses the point (x0, y0) and ends at the point (x1, y1),
        // and that has a different point tangent to the half-infinite line that ends at the point (x1, y1), and crosses the point (x2, y2).
        // The points at which this circle touches these two lines are called the start and end tangent points respectively.

        // note that both vectors are unit vectors, so the length is 1
        var cos = (unit_vec_p1_p0[0] * unit_vec_p1_p2[0] + unit_vec_p1_p0[1] * unit_vec_p1_p2[1]);
        var theta = Math.acos(Math.abs(cos));

        // Calculate origin
        var unit_vec_p1_origin = normalize([
            unit_vec_p1_p0[0] + unit_vec_p1_p2[0],
            unit_vec_p1_p0[1] + unit_vec_p1_p2[1]
        ]);
        var len_p1_origin = radius / Math.sin(theta / 2);
        var x = x1 + len_p1_origin * unit_vec_p1_origin[0];
        var y = y1 + len_p1_origin * unit_vec_p1_origin[1];

        // Calculate start angle and end angle
        // rotate 90deg clockwise (note that y axis points to its down)
        var unit_vec_origin_start_tangent = [
            -unit_vec_p1_p0[1],
            unit_vec_p1_p0[0]
        ];
        // rotate 90deg counter clockwise (note that y axis points to its down)
        var unit_vec_origin_end_tangent = [
            unit_vec_p1_p2[1],
            -unit_vec_p1_p2[0]
        ];
        var getAngle = function (vector) {
            // get angle (clockwise) between vector and (1, 0)
            var x = vector[0];
            var y = vector[1];
            if (y >= 0) { // note that y axis points to its down
                return Math.acos(x);
            } else {
                return -Math.acos(x);
            }
        };
        var startAngle = getAngle(unit_vec_origin_start_tangent);
        var endAngle = getAngle(unit_vec_origin_end_tangent);

        // Connect the point (x0, y0) to the start tangent point by a straight line
        this.__lineTo(x + unit_vec_origin_start_tangent[0] * radius,
            y + unit_vec_origin_start_tangent[1] * radius);

        // Connect the start tangent point to the end tangent point by arc
        // and adding the end tangent point to the subpath.
        this.__arc(x, y, radius, startAngle, endAngle);
    };

    /**
     * Sets the stroke property on the current element
     */
    ctx.prototype.stroke = function (path) {
        // console.log('ctx.prototype.stroke');
        //isaque adicionou
        if (this.__ctx) {
            if (arguments.length == 0) {
                this.__ctx.stroke();
            } else if (arguments.length == 1) {
                this.__ctx.stroke(path);
            }
        }

        this.__stroke();
    };

    /**
    * internal to SVG 
    *  Sets the stroke property on the current element
    */
    ctx.prototype.__stroke = function () {

        if (this.__currentElement.nodeName === "path") {
            this.__currentElement.setAttribute("paint-order", "fill stroke markers");
        }
        this.__applyCurrentDefaultPath();
        this.__applyStyleToCurrentElement("stroke");
    };

    /**
     * Sets fill properties on the current element
     */
    ctx.prototype.fill = function () {
        // console.log('ctx.prototype.fill');
        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.fill();
        }

        this.__fill();
    };

    /**
     * __fill internal to SVG
     * Sets fill properties on the current element
     */
    ctx.prototype.__fill = function () {

        if (this.__currentElement.nodeName === "path") {
            this.__currentElement.setAttribute("paint-order", "stroke fill markers");
        }
        this.__applyCurrentDefaultPath();
        this.__applyStyleToCurrentElement("fill");
    };

    /**
     *  Adds a rectangle to the path.
     */
    ctx.prototype.rect = function (x, y, width, height) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.rect(x, y, width, height);
        }

        this.__rect(x, y, width, height);
    };

    /**
    * __rect intrenal Adds a rectangle to the path.
    */
    ctx.prototype.__rect = function (x, y, width, height) {

        if (this.__currentElement.nodeName !== "path") {
            this.__beginPath();
        }
        this.__moveTo(x, y);
        this.__lineTo(x + width, y);
        this.__lineTo(x + width, y + height);
        this.__lineTo(x, y + height);
        this.__lineTo(x, y);
        this.__closePath();
    };


    /**
     * adds a rectangle element
     */
    ctx.prototype.fillRect = function (x, y, width, height) {
        // console.log(' ctx.prototype.fillRect ');
        // console.log(this.__ctx.fillStyle);
        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.fillRect(x, y, width, height);
        }

        this.__fillRect(x, y, width, height);
    };

    /**
    * adds a rectangle element
    */
    ctx.prototype.__fillRect = function (x, y, width, height) {

        var rect, parent;
        rect = this.__createElement("rect", {
            x: x,
            y: y,
            width: width,
            height: height
        }, true);
        parent = this.__closestGroupOrSvg();
        parent.appendChild(rect);
        this.__currentElement = rect;
        this.__applyStyleToCurrentElement("fill");
    };

    /**
     * Draws a rectangle with no fill
     * @param x
     * @param y
     * @param width
     * @param height
     */
    ctx.prototype.strokeRect = function (x, y, width, height) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.strokeRect(x, y, width, height);
        }

        this.__strokeRect(x, y, width, height);
    };

    ctx.prototype.__strokeRect = function (x, y, width, height) {

        var rect, parent;
        rect = this.__createElement("rect", {
            x: x,
            y: y,
            width: width,
            height: height
        }, true);
        parent = this.__closestGroupOrSvg();
        parent.appendChild(rect);
        this.__currentElement = rect;
        this.__applyStyleToCurrentElement("stroke");
    };


    /**
     * Clear entire canvas:
     * 1. save current transforms
     * 2. remove all the childNodes of the root g element
     */
    ctx.prototype.__clearCanvas = function () {
        //console.log('ctx.prototype.__clearCanvas');

        var current = this.__closestGroupOrSvg(),
            transform = current.getAttribute("transform");
        var rootGroup = this.__root.childNodes[1];
        var childNodes = rootGroup.childNodes;
        for (var i = childNodes.length - 1; i >= 0; i--) {
            if (childNodes[i]) {
                rootGroup.removeChild(childNodes[i]);
            }
        }
        this.__currentElement = rootGroup;
        //reset __groupStack as all the child group nodes are all removed.
        this.__groupStack = [];
        if (transform) {
            this.__addTransform(transform);
        }
    };

    /**
     * "Clears" a canvas by just drawing a white rectangle in the current group.
     */
    ctx.prototype.clearRect = function (x, y, width, height) {
        //console.log('ctx.prototype.clearRect');

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.clearRect(x, y, width, height);
        }
        this.__clearRect(x, y, width, height);

    };

    ctx.prototype.__clearRect = function (x, y, width, height) {

        //clear entire canvas
        if (x === 0 && y === 0 && width === this.width && height === this.height) {
            this.__clearCanvas();
            return;
        }
        var rect, parent = this.__closestGroupOrSvg();
        rect = this.__createElement("rect", {
            x: x,
            y: y,
            width: width,
            height: height,
            fill: "#FFFFFF"
        }, true);
        parent.appendChild(rect);
    };

    /**
     * Adds a linear gradient to a defs tag.
     * Returns a canvas gradient object that has a reference to it's parent def
     */
    ctx.prototype.createLinearGradient = function (x1, y1, x2, y2) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.createLinearGradient(x1, y1, x2, y2);
        }

        var grad = this.__createElement("linearGradient", {
            id: randomString(this.__ids),
            x1: x1 + "px",
            x2: x2 + "px",
            y1: y1 + "px",
            y2: y2 + "px",
            "gradientUnits": "userSpaceOnUse"
        }, false);
        this.__defs.appendChild(grad);
        return new CanvasGradient(grad, this);
    };

    /**
     * Adds a radial gradient to a defs tag.
     * Returns a canvas gradient object that has a reference to it's parent def
     */
    ctx.prototype.createRadialGradient = function (x0, y0, r0, x1, y1, r1) {

        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
        }

        var grad = this.__createElement("radialGradient", {
            id: randomString(this.__ids),
            cx: x1 + "px",
            cy: y1 + "px",
            r: r1 + "px",
            fx: x0 + "px",
            fy: y0 + "px",
            "gradientUnits": "userSpaceOnUse"
        }, false);
        this.__defs.appendChild(grad);
        return new CanvasGradient(grad, this);

    };

    /**
     * Parses the font string and returns svg mapping
     * @private
     */
    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-z0-9]+?)\s*$/i;
        var fontPart = regex.exec(this.font);
        var data = {
            style: fontPart[1] || 'normal',
            size: fontPart[4] || '10px',
            family: fontPart[6] || 'sans-serif',
            weight: fontPart[3] || 'normal',
            decoration: fontPart[2] || 'normal',
            href: null
        };

        //canvas doesn't support underline natively, but we can pass this attribute
        if (this.__fontUnderline === "underline") {
            data.decoration = "underline";
        }

        //canvas also doesn't support linking, but we can pass this as well
        if (this.__fontHref) {
            data.href = this.__fontHref;
        }

        return data;
    };

    /**
     * Helper to link text fragments
     * @param font
     * @param element
     * @return {*}
     * @private
     */
    ctx.prototype.__wrapTextLink = function (font, element) {
        if (font.href) {
            var a = this.__createElement("a");
            a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
            a.appendChild(element);
            return a;
        }
        return element;
    };

    /**
     * Fills or strokes text
     * @param text
     * @param x
     * @param y
     * @param action - stroke or fill
     * @private
     */
    ctx.prototype.__applyText = function (text, x, y, action) {
        var font = this.__parseFont(),
            parent = this.__closestGroupOrSvg(),
            textElement = this.__createElement("text", {
                "font-family": font.family,
                "font-size": font.size,
                "font-style": font.style,
                "font-weight": font.weight,
                "text-decoration": font.decoration,
                "x": x,
                "y": y,
                "text-anchor": getTextAnchor(this.textAlign),
                "dominant-baseline": getDominantBaseline(this.textBaseline)
            }, true);

        textElement.appendChild(this.__document.createTextNode(text));
        this.__currentElement = textElement;
        this.__applyStyleToCurrentElement(action);
        parent.appendChild(this.__wrapTextLink(font, textElement));
    };

    /**
     * Creates a text element
     * @param text
     * @param x
     * @param y
     */
    ctx.prototype.fillText = function (text, x, y, maxWidth) {
        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.fillText(text, x, y, maxWidth);
        }

        this.__applyText(text, x, y, "fill");
    };

    /**
     * Strokes text
     * @param text
     * @param x
     * @param y
     */
    ctx.prototype.strokeText = function (text, x, y, maxWidth) {
        //isaque adicionou
        if (this.__ctx) {
            this.__ctx.fillText(strokeText, x, y, maxWidth);
        }

        this.__applyText(text, x, y, "stroke");
    };

    /**
     * No need to implement this for svg.
     * @param text
     * @return {TextMetrics}
     */
    ctx.prototype.measureText = function (text) {

        this.__ctx.font = this.font;
        return this.__ctx.measureText(text);
    };

    /**
     *  Arc command!
     */
    ctx.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwise) {

        //isaque adicionou
        if (this.__ctx) {
            if (arguments.length == 5) {
                console.log(`ctx.prototype.arc 5: ${x} ${y} ${radius} ${startAngle} ${endAngle} `);
                this.__ctx.arc(x, y, radius, startAngle, endAngle);
            } else if (arguments.length == 6) {
                console.log(`ctx.prototype.arc 6: ${x} ${y} ${radius} ${startAngle} ${endAngle} ${counterClockwise}`);
                this.__ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
            }
        }

        this.__arc(x, y, radius, startAngle, endAngle, counterClockwise);
    };

    /**
     *  __arc internal to SVG
     */
    ctx.prototype.__arc = function (x, y, radius, startAngle, endAngle, counterClockwise) {

        // in canvas no circle is drawn if no angle is provided.
        if (startAngle !== endAngle) {

            startAngle = startAngle % (2 * Math.PI);
            endAngle = endAngle % (2 * Math.PI);
            if (startAngle === endAngle) {
                //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);
            }
            var endX = x + radius * Math.cos(endAngle),
                endY = y + radius * Math.sin(endAngle),
                startX = x + radius * Math.cos(startAngle),
                startY = y + radius * Math.sin(startAngle),
                sweepFlag = counterClockwise ? 0 : 1,
                largeArcFlag = 0,
                diff = endAngle - startAngle;

            // https://github.com/gliffy/canvas2svg/issues/4
            if (diff < 0) {
                diff += 2 * Math.PI;
            }

            if (counterClockwise) {
                largeArcFlag = diff > Math.PI ? 0 : 1;
            } else {
                largeArcFlag = diff > Math.PI ? 1 : 0;
            }

            this.__lineTo(startX, startY);
            this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
                { rx: radius, ry: radius, xAxisRotation: 0, largeArcFlag: largeArcFlag, sweepFlag: sweepFlag, endX: endX, endY: endY }));

            this.__currentPosition = { x: endX, y: endY };
        }
    };

    /**
     * Generates a ClipPath from the clip command.
     */
    ctx.prototype.clip = function (a, b) {

        //isaque adicionou
        if (this.__ctx) {
            if (arguments.length == 0) {
                console.log(`ctx.prototype.clip ${a} `);
                this.__ctx.clip();
            } else if (arguments.length == 1) {
                console.log(`ctx.prototype.clip ${a}`);
                this.__ctx.clip(a);
            } else if (arguments.length == 2) {
                console.log(`ctx.prototype.clip ${a} ${b}`);
                this.__ctx.clip(a, b);
            }
        }

        __clip(a, b);

    };


    ctx.prototype.__clip = function (a, b) {


        var group = this.__closestGroupOrSvg(),
            clipPath = this.__createElement("clipPath"),
            id = randomString(this.__ids),
            newGroup = this.__createElement("g");

        this.__applyCurrentDefaultPath();
        group.removeChild(this.__currentElement);
        clipPath.setAttribute("id", id);
        clipPath.appendChild(this.__currentElement);

        this.__defs.appendChild(clipPath);

        //set the clip path to this group
        group.setAttribute("clip-path", format("url(#{id})", { id: id }));

        //clip paths can be scaled and transformed, we need to add another wrapper group to avoid later transformations
        // to this path
        group.appendChild(newGroup);

        this.__currentElement = newGroup;

    };

    /**
     * Draws a canvas, image or mock context to this canvas.
     * 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
     */
    ctx.prototype.drawImage = function (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {
        //isaque adicionou
        if (this.__ctx) {
            console.log(`ctx.prototype.drawImage ${image} ${sx}`);
            if (arguments.length == 3) {
                this.__ctx.drawImage(image, sx, sy);
            } else if (arguments.length == 5) {
                this.__ctx.drawImage(image, sx, sy, sWidth, sHeight);
            } else if (arguments.length == 9) {
                this.__ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
            }
        }

        this.__drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
    };


    ctx.prototype.__drawImage = function (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {


        //convert arguments to a real array
        var args = Array.prototype.slice.call(arguments),
            image = args[0],
            dx, dy, dw, dh, sx = 0, sy = 0, sw, sh, parent, svg, defs, group,
            currentElement, svgImage, canvas, context, id;

        if (args.length === 3) {
            dx = args[1];
            dy = args[2];
            sw = image.width;
            sh = image.height;
            dw = sw;
            dh = sh;
        } else if (args.length === 5) {
            dx = args[1];
            dy = args[2];
            dw = args[3];
            dh = args[4];
            sw = image.width;
            sh = image.height;
        } else if (args.length === 9) {
            sx = args[1];
            sy = args[2];
            sw = args[3];
            sh = args[4];
            dx = args[5];
            dy = args[6];
            dw = args[7];
            dh = args[8];
        } else {
            throw new Error("Invalid number of arguments passed to drawImage: " + arguments.length);
        }

        parent = this.__closestGroupOrSvg();
        currentElement = this.__currentElement;
        var translateDirective = "translate(" + dx + ", " + dy + ")";
        if (image instanceof ctx) {
            //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().cloneNode(true);
            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) {
                    //save original transform
                    var originTransform = group.getAttribute("transform");
                    var transformDirective;
                    if (originTransform) {
                        transformDirective = originTransform + " " + translateDirective;
                    } else {
                        transformDirective = translateDirective;
                    }
                    group.setAttribute("transform", transformDirective);
                    parent.appendChild(group);
                }
            }
        } else if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
            //canvas or image
            svgImage = this.__createElement("image");
            svgImage.setAttribute("width", dw);
            svgImage.setAttribute("height", dh);
            svgImage.setAttribute("preserveAspectRatio", "none");

            if (sx || sy || sw !== image.width || sh !== image.height) {
                //crop the image using a temporary canvas
                canvas = this.__document.createElement("canvas");
                canvas.width = dw;
                canvas.height = dh;
                context = canvas.getContext("2d");
                context.drawImage(image, sx, sy, sw, sh, 0, 0, dw, dh);
                image = canvas;
            }
            svgImage.setAttribute("transform", translateDirective);
            svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
                image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
            parent.appendChild(svgImage);
        }
    };


    /**
     * Generates a pattern tag
     */
    ctx.prototype.createPattern = function (image, repetition) {

        //isaque adicionou
        if (this.__ctx) {
            console.log(`ctx.prototype.createPattern ${image} ${repetition}`);
            this.__ctx.createPattern(image, repetition);
        }

        var pattern = this.__document.createElementNS("http://www.w3.org/2000/svg", "pattern"), id = randomString(this.__ids),
            img;
        pattern.setAttribute("id", id);
        pattern.setAttribute("width", image.width);
        pattern.setAttribute("height", image.height);
        if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
            img = this.__document.createElementNS("http://www.w3.org/2000/svg", "image");
            img.setAttribute("width", image.width);
            img.setAttribute("height", image.height);
            img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
                image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
            pattern.appendChild(img);
            this.__defs.appendChild(pattern);
        } else if (image instanceof ctx) {
            pattern.appendChild(image.__root.childNodes[1]);
            this.__defs.appendChild(pattern);
        }
        return new CanvasPattern(pattern, this);
    };

    ctx.prototype.setLineDash = function (dashArray) {

        //isaque adicionou
        if (this.__ctx) {

            if (arguments.length == 0) {
                console.log(`ctx.prototype.setLineDash ${dashArray}`);
                this.__ctx.setLineDash();
            } else if (arguments.length == 1) {
                console.log(`ctx.prototype.setLineDash ${dashArray}`);
                this.__ctx.setLineDash(dashArray);
            }
        }

        this.__setLineDash(dashArray);
    };


    ctx.prototype.__setLineDash = function (dashArray) {

        if (dashArray && dashArray.length > 0) {
            this.lineDash = dashArray.join(",");
        } else {
            this.lineDash = null;
        }
    };

    /* Chart JS v4.2.1 Compatibility */
    ctx.prototype.getContext = function (contextId) {
        console.log(`ctx.prototype.getContext ${contextId}`);
        if (String(contextId).toUpperCase() == '2D') {
            return this
        }
        return null
    }
    ctx.prototype.getContext2d = function () {
        console.log('ctx.prototype.getContext2d');
        return this.__ctx;
    }
    ctx.prototype.style = function () {
        console.log('ctx.prototype.style');
        return this.__canvas.style;
    }
    ctx.prototype.getAttribute = function (prop_name) {
        console.log(`ctx.prototype.getAttribute ${prop_name} ${this[prop_name]}`);
        return this[prop_name]
    }


    /**
     * Not yet implemented
     */
    ctx.prototype.drawFocusRing = function () {
        //isaque adicionou
        if (this.__ctx) {
            console.log('ctx.prototype.drawFocusRing');
            return this.__ctx.drawFocusRing();
        }
    };
    ctx.prototype.createImageData = function () {
        //isaque adicionou
        if (this.__ctx) {
            console.log('ctx.prototype.createImageData');
            return this.__ctx.createImageData();
        }
    };
    ctx.prototype.getImageData = function () {
        //isaque adicionou
        if (this.__ctx) {
            console.log('ctx.prototype.getImageData');
            return this.__ctx.getImageData();
        }
    };
    ctx.prototype.putImageData = function () {
        //isaque adicionou
        if (this.__ctx) {
            console.log('ctx.prototype.putImageData');
            return this.__ctx.putImageData();
        }
    };


    /**
     * SetTransform changes the current transformation matrix to
     * the matrix given by the arguments as described below.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform
     */
    ctx.prototype.setTransform = function (a, b, c, d, e, f) {

        //isaque adicionou
        if (this.__ctx) {
            if (arguments.length == 1) {
                console.log('ctx.prototype.setTransform');
                this.__ctx.setTransform(a);
            } else {
                console.log('ctx.prototype.setTransform');
                this.__ctx.setTransform(a, b, c, d, e, f);
            }
        }

        this.__setTransform(a, b, c, d, e, f);
    };

    ctx.prototype.__setTransform = function (a, b, c, d, e, f) {

        if (a instanceof DOMMatrix) {
            this.__transformMatrix = new DOMMatrix([a.a, a.b, a.c, a.d, a.e, a.f]);
        } else {
            this.__transformMatrix = new DOMMatrix([a, b, c, d, e, f]);
        }
    };

    /**
     * GetTransform Returns a copy of the current transformation matrix,
     * as a newly created DOMMAtrix Object
     *
     * @returns A DOMMatrix Object
     */
    ctx.prototype.getTransform = function () {
        //isaque adicionou
        if (this.__ctx) {
            console.log('ctx.prototype.getTransform');
            return this.__ctx.getTransform();
        }
        return __getTransform();
    };


    ctx.prototype.__getTransform = function () {
        let { a, b, c, d, e, f } = this.__transformMatrix;
        return new DOMMatrix([a, b, c, d, e, f]);
    };

    /**
     * ResetTransform resets the current transformation matrix to the identity matrix
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/resetTransform
     */
    ctx.prototype.resetTransform = function () {
        //isaque adicionou
        if (this.__ctx) {
            console.log('ctx.prototype.resetTransform');
            return this.__ctx.resetTransform();
        }

        this.__resetTransform();
    };

    ctx.prototype.__resetTransform = function () {      

        this.__setTransform(1, 0, 0, 1, 0, 0);
    };

   
    ctx.prototype.addEventListener = function (type, listener, eventListenerOptions) {
        console.log('ctx.prototype.addEventListener');
       // this.__canvas.addEventListener(type, listener, eventListenerOptions);
    };

    //add options for alternative namespace
    if (typeof window === "object") {
        window.C2S = ctx;
    }

    // CommonJS/Browserify
    if (typeof module === "object" && typeof module.exports === "object") {
        module.exports = ctx;
    }

}());

@Casal0x
Copy link

Casal0x commented May 30, 2023

i'm seeing you repo, could you add some examples? i'm also trying to convert a canvas to svg

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants