Fix patterns offset for text

[asturur]

Introducing the shift of the canvas for patterns , makes the fix in the gradient class useless.

Includes @sapics fix for #2181

closes #2109
closes #760
closes #2181
resulting svg

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="700" height="600" xml:space="preserve"><desc>Created with Fabric.js 1.5.0</desc><defs></defs><pattern id="SVGID_22" x="0.018410554695494886" y="0" width="0.16937710319855295" height="0.07901390644753478">
<image x="0" y="0" width="46" height="29" xlink:href="http://fabricjs.com/assets/escheresque.png"></image>
</pattern>
    <g transform="translate(411.79 396.51)">
        <text font-family="tahoma" font-size="140" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: url(#SVGID_22); fill-rule: nonzero; opacity: 1;" ><tspan x="-135.79" y="-60.31" fill="[object Object]">Text</tspan><tspan x="-135.79" y="123.2" fill="[object Object]">Text</tspan></text>
    </g>
<pattern id="SVGID_23" x="0" y="0" width="0.23" height="0.145">
<image x="0" y="0" width="46" height="29" xlink:href="http://fabricjs.com/assets/escheresque.png"></image>
</pattern>
<rect x="-100" y="-100" rx="0" ry="0" width="200" height="200" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: url(#SVGID_23); fill-rule: nonzero; opacity: 1;" transform="translate(311 101)"/>
<linearGradient id="SVGID_24" gradientUnits="userSpaceOnUse" x1="-100" y1="-100" x2="100" y2="-100">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity: 1"/>
</linearGradient>
<rect x="-100" y="-100" rx="0" ry="0" width="200" height="200" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: url(#SVGID_24); fill-rule: nonzero; opacity: 1;" transform="translate(102 100)"/>
<linearGradient id="SVGID_25" gradientUnits="userSpaceOnUse" x1="-135.7916717529297" y1="-183.51199999999997" x2="64.20832824707031" y2="-183.51199999999997">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity: 1"/>
</linearGradient>
    <g transform="translate(138.79 371.51)">
        <text font-family="tahoma" font-size="140" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: url(#SVGID_25); fill-rule: nonzero; opacity: 1;" ><tspan x="-135.79" y="-60.31" fill="[object Object]">Text</tspan><tspan x="-135.79" y="123.2" fill="[object Object]">Text</tspan></text>
    </g>
<linearGradient id="SVGID_26" gradientUnits="userSpaceOnUse" x1="-1495.3333740234375" y1="-917.56" x2="-897.1500244140625" y2="-917.56">
<stop offset="0%" style="stop-color:rgb(101,250,136);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(54,167,122);stop-opacity: 1"/>
</linearGradient>
    <g transform="translate(763.03 431.1) rotate(-2) scale(0.5 0.5)">
        <text font-family="helvetica" font-size="200" style="stroke: url(#SVGID_26); stroke-width: 7; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" ><tspan x="-1495.33" y="-741.56" fill="null">Lorem ipsum dolor sit amet,</tspan><tspan x="-1495.33" y="-479.4" fill="null">consectetur adipisicing elit,</tspan><tspan x="-1495.33" y="-217.24" fill="null">sed do eiusmod tempor incididunt</tspan><tspan x="-1495.33" y="44.92" fill="null">ut labore et dolore magna aliqua.</tspan><tspan x="-1495.33" y="307.08" fill="null">Ut enim ad minim veniam,</tspan><tspan x="-1495.33" y="569.24" fill="null">quis nostrud exercitation ullamco</tspan><tspan x="-1495.33" y="831.4" fill="null">laboris nisi</tspan></text>
    </g>
</svg>

// clear canvas
canvas.clear();

canvas.loadFromJSON({"objects":[{"type":"text","originX":"left","originY":"top","left":276,"top":213,"width":271.58,"height":367.02,"fill":{"source":"http://fabricjs.com/assets/escheresque.png","repeat":"repeat","offsetX":5,"offsetY":0},"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","text":"Text\nText","fontSize":140,"fontWeight":"normal","fontFamily":"tahoma","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""},{"type":"rect","originX":"left","originY":"top","left":211,"top":1,"width":200,"height":200,"fill":{"source":"http://fabricjs.com/assets/escheresque.png","repeat":"repeat","offsetX":0,"offsetY":0},"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","rx":0,"ry":0},{"type":"rect","originX":"left","originY":"top","left":2,"top":0,"width":200,"height":200,"fill":{"type":"linear","coords":{"x1":0,"y1":0,"x2":200,"y2":0},"colorStops":[{"offset":"0","color":"rgb(255,0,0)","opacity":1},{"offset":"1","color":"rgb(0,0,255)","opacity":1}],"offsetX":0,"offsetY":0},"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","rx":0,"ry":0},{"type":"text","originX":"left","originY":"top","left":3,"top":188,"width":271.58,"height":367.02,"fill":{"type":"linear","coords":{"x1":0,"y1":0,"x2":200,"y2":0},"colorStops":[{"offset":"0","color":"rgb(255,0,0)","opacity":1},{"offset":"1","color":"rgb(0,0,255)","opacity":1}],"offsetX":0,"offsetY":0},"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","text":"Text\nText","fontSize":140,"fontWeight":"normal","fontFamily":"tahoma","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""},{"type":"text","originX":"left","originY":"top","left":397,"top":38,"width":598.18,"height":367.02,"fill": null,"stroke":{"type":"linear","coords":{"x1":0,"y1":0,"x2":598.183349609375,"y2":0},"colorStops":[{"offset":"0","color":"rgb(101,250,136)","opacity":1},{"offset":"1","color":"rgb(54,167,122)","opacity":1}],"offsetX":0,"offsetY":0},"strokeWidth":7,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.5,"scaleY":0.5,"angle":-2,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","text":"Lorem ipsum dolor sit amet,\nconsectetur adipisicing elit,\nsed do eiusmod tempor incididunt\nut labore et dolore magna aliqua.\nUt enim ad minim veniam,\nquis nostrud exercitation ullamco\nlaboris nisi","fontSize":200,"fontWeight":"","fontFamily":"helvetica","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""}],"background":""})

rendered SVG

[asturur]

i see a potential little bug. do not merge.

[asturur]

@kangax i think this is fine now.
Other than supporting offset for pattern in text, fixes patterns in text that where misaligned by width/2 and height/2 respect to all other objects.