JSPM

canvg-browser

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4010
  • Score
    100M100P100Q14796F
  • License MIT

Javascript SVG parser and renderer on Canvas, adapted for CommonJS

Package Exports

  • canvg-browser

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (canvg-browser) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

canvg-browser

Build Status

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:

<canvas id="canvas" width="200px" height="200px"></canvas>
var canvg = require('canvg-browser'),
    canvas = document.getElementById('canvas');

var svg = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" /></svg>';

var options = {
  log: false,
  ignoreMouse: true
};

canvg(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:

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