How to use svgcanvas - 5 common examples

To help you get started, we’ve selected a few svgcanvas examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github zenozeng / p5.js-svg / test / unit / bundle.js View on Github external
var prepareDom = function(draw) {
    var $container = $('#test-graph');

    var status = {};

    // draw header
    var th = '<div class="th"><div>Rendered in SVG</div><div>Rendered in Canvas<br>Converted to PNG</div><div>Diff Bitmap</div><div>Diff Bitmap with thin line removed (8-connected neighborhood &lt; 5)</div><div></div><div class="function">p5.js</div></div>';
    $container.append(th);

    // the svg result
    var svg = new Image();
    svg.onload = function() {
        status.svg = true;
    };
    svg.src = SVGCanvas.prototype.toDataURL.call({svg: p5svg._renderer.svg},
                                                 "image/svg+xml");
    var _svg = p5svg._renderer.svg.cloneNode(true);
    _svg.id = null;
    _svg.className = 'svg';
    $container.append(_svg);

    // the canvas result
    var canvas = new Image();
    canvas.onload = function() {
        status.canvas = true;
    };
    canvas.src = p5canvas._curElement.elt.toDataURL('image/png');
    $container.append(canvas);

    // diff canvas
    var diffCanvas = document.createElement('canvas');
github zenozeng / p5.js-svg / test / lib / test-render.js View on Github external
var prepareDom = function(draw) {
    var $container = $('#test-graph');

    var status = {};

    // draw header
    var th = '<div class="th"><div>Rendered in SVG</div><div>Rendered in Canvas<br>Converted to PNG</div><div>Diff Bitmap</div><div>Diff Bitmap with thin line removed (8-connected neighborhood &lt; 5)</div><div></div><div class="function">p5.js</div></div>';
    $container.append(th);

    // the svg result
    var svg = new Image();
    svg.onload = function() {
        status.svg = true;
    };
    svg.src = SVGCanvas.prototype.toDataURL.call({svg: p5svg._renderer.svg},
                                                 "image/svg+xml");
    var _svg = p5svg._renderer.svg.cloneNode(true);
    _svg.id = null;
    _svg.className = 'svg';
    $container.append(_svg);

    // the canvas result
    var canvas = new Image();
    canvas.onload = function() {
        status.canvas = true;
    };
    canvas.src = p5canvas._curElement.elt.toDataURL('image/png');
    $container.append(canvas);

    // diff canvas
    var diffCanvas = document.createElement('canvas');
github mehowone / myPlayground / VertexTypeGenerator / libraries / p5.svg.js View on Github external
p5.prototype.loadGraphics = function(graphics, successCallback, failureCallback) {
        if (graphics._renderer.svg) {
            var svg = graphics._renderer.svg;
            var url = SVGCanvas.prototype.toDataURL.call(graphics._renderer.elt, 'image/svg+xml');
            var pg = this.createGraphics(graphics.width, graphics.height);
            // also copy SVG, so we can keep vector SVG when image(pg) in SVG runtime
            pg._renderer.svg = svg.cloneNode(true);
            pg.loadImage(url, function(img) {
                pg.image(img);
                successCallback(pg);
            }, failureCallback);
        } else {
            successCallback(graphics);
        }
    };
github zenozeng / p5.js-svg / src / rendering.js View on Github external
p5.prototype.loadGraphics = function(graphics, successCallback, failureCallback) {
        if (graphics._renderer.svg) {
            var svg = graphics._renderer.svg;
            var url = SVGCanvas.prototype.toDataURL.call(graphics._renderer.elt, 'image/svg+xml');
            var pg = this.createGraphics(graphics.width, graphics.height, constants.SVG);
            // also copy SVG, so we can keep vector SVG when image(pg) in SVG runtime
            pg._renderer.svg = svg.cloneNode(true);
            pg.loadImage(url, function(img) {
                pg.image(img);
                setTimeout(function() {
                    successCallback(pg);
                }, 1);
            }, failureCallback);
        } else {
            setTimeout(function() {
                successCallback(graphics);
            }, 1);
        }
    };
github zenozeng / p5.js-svg / dist / p5.svg.js View on Github external
p5.prototype.loadGraphics = function(graphics, successCallback, failureCallback) {
        if (graphics._renderer.svg) {
            var svg = graphics._renderer.svg;
            var url = SVGCanvas.prototype.toDataURL.call(graphics._renderer.elt, 'image/svg+xml');
            var pg = this.createGraphics(graphics.width, graphics.height, constants.SVG);
            // also copy SVG, so we can keep vector SVG when image(pg) in SVG runtime
            pg._renderer.svg = svg.cloneNode(true);
            pg.loadImage(url, function(img) {
                pg.image(img);
                successCallback(pg);
            }, failureCallback);
        } else {
            successCallback(graphics);
        }
    };

svgcanvas

svgcanvas

MIT
Latest version published 10 months ago

Package Health Score

59 / 100
Full package analysis

Popular svgcanvas functions

Popular JavaScript code snippets

Find secure code to use in your application or website