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.
zenozeng / p5.js-svg / test / unit / bundle.js View on Github 
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 < 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');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 < 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');
mehowone / myPlayground / VertexTypeGenerator / libraries / p5.svg.js View on Github 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);
}
};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);
}
};
zenozeng / p5.js-svg / dist / p5.svg.js View on Github 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);
}
};
