canvg-browser

A port of canvg that properly works in the browser as CommonJS module.

Differences to canvg

• Exposes CommonJS module
• Dependencies such as rgbcolor and stackblur are required in the CommonJS way, too
• Test cases verify this project works in the browser

Installation

npm install canvg-browser --save

Usage

Put a canvas on your page:

1<canvas id="canvas" width="200px" height="200px"></canvas>

1var canvg = require('canvg-browser'),
2    canvas = document.getElementById('canvas');
3
4var svg = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" /></svg>';
5
6var options = {
7  log: false,
8  ignoreMouse: true
9};
10
11canvg(canvas, svg, options);

Options

• log: true => console.log information
• ignoreMouse: true => ignore mouse events
• ignoreAnimation: true => ignore animations
• ignoreDimensions: true => does not try to resize canvas
• ignoreClear: true => does not clear canvas
• offsetX: int => draws at a x offset
• offsetY: int => draws at a y offset
• scaleWidth: int => scales horizontally to width
• scaleHeight: int => scales vertically to height
• renderCallback: function => will call the function after the first render is completed
• forceRedraw: function => will call the function on every frame, if it returns true, will redraw
• useCORS: true => will attempt to use CORS on images to not taint canvas

You can call canvg without parameters to replace all svg images on a page. See the example.

There is also a built in extension method to the canvas context to draw svgs similar to the way drawImage works:

1var c = document.getElementById('canvas');
2var ctx = c.getContext('2d');
3ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);

Related Repositories

• canvg