JavaScript SVG parser and renderer on Canvas

Overview

canvg

Logo

NPM version Dependencies status Build status Coverage status

JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders the result on Canvas. It also can be used to rasterize SVG images.

Quickstart   •   Docs   •   Demo


Quickstart

Install this library using your favorite package manager:

pnpm add canvg
# or
yarn add canvg
# or
npm i canvg

Then, just import Canvg and use it:

import { Canvg } from 'canvg';

let v = null;

window.onload = async () => {
  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');

  v = await Canvg.from(ctx, './svgs/1.svg');

  // Start SVG rendering with animations and mouse handling.
  v.start();
};

window.onbeforeunload = () => {
  v.stop();
};

Description of all exports you can find in Documentation.


supported by Cube

Docs

What's implemented?

The end goal is everything from the SVG spec. The majority of the rendering and animation is working. If you would like to see a feature implemented, don't hesitate to add it to the issues list, or better is to create pull request 😎

Comments
  • Official npm package

    Official npm package

    I'm currently preparing a pull request for https://github.com/A----/highcharts-export-clientside/issues/27, which depends on this. It would be nice if I could add this package as an actual dependency with a semver version constraint instead of locking it to a git commit.

    It seems like https://www.npmjs.com/package/canvg is not an official package and also says it's a "port" and that "all browser-specific code has to be removed". Could you maybe publish an official package at NPM if @yetzt makes the name available, so this can be properly depended on?

    opened by felixfbecker 20
  • Support for <image> elements

    Support for elements

    From [email protected] on August 05, 2010 14:25:18

    As requested by an SVG-edit user [1], it would be nice to have support for elements. Thanks!

    [1] https://code.google.com/p/svg-edit/issues/detail?id=635

    Original issue: http://code.google.com/p/canvg/issues/detail?id=51

    imported 
    opened by gabelerner 20
  • canvas.toDataURL('image/jpeg', 1) failed

    canvas.toDataURL('image/jpeg', 1) failed

    I got the canvas after v.render({...}), and then I use the canvas to carry out "canvas.toDataURL('image/jpeg', 1)", it was failed, hint me: "DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." I can't find out what was tainted, can you help me?

    opened by Undo101 17
  • Raphael Image Fill Issue Canvas Conversion

    Raphael Image Fill Issue Canvas Conversion

    From [email protected] on August 10, 2012 08:43:50

    What steps will reproduce the problem? 1.Use the user interface to add a picture to fill a Raphael Object. 2.Click Button for Raphael to Canvas conversion. 3.Image fill will be cut up and repositioned. What is the expected output? What do you see instead? Expected output would be the images not cut up and repositioned but I see them cut up and repositioned. What version of the product are you using? On what operating system? Not Sure. OS is Windows 7. Please provide any additional information below. I have attached two files that are images that display what I am talking about. I have created this user interface in Raphael and what the user can do is fill the different raphael objects with pictures. After they get done doing that I want to have them click a button to begin the SVG to canvas conversion. Issue is when they do this the images get all cut up and repositioned. I do not understand why. Please help.

    Attachment: screenshot1.png screenshot2.png

    Original issue: http://code.google.com/p/canvg/issues/detail?id=158

    imported 
    opened by gabelerner 17
  • Update from deprecated rollup-plugin-babel

    Update from deprecated rollup-plugin-babel

    update deprecated rollup-plugin-babel to @rollup/plugin-babel

    Also switches to current API with babelHelpers: 'runtime', adding @babel/runtime as dependency and externals as required for this option per https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers . and removing now outdated and invalid runtimeHelpers.

    (Also switches .babelrc to use "json" file extension.)

    opened by brettz9 16
  • Potential updates to make for 3.0.0

    Potential updates to make for 3.0.0

    1. Can we eject .eslintrc so we can edit it here for our future needs?
    2. Can we eject .browserlistrc so we can edit it here for our future needs?
    3. Issue 104 is broken (in both v2/v3, need to move it to broken, this is my mistake from earlier - i went through all the generated images and v3 matches or beats v2 on all of them!) <== never mind it's already listed in broken
    4. Should we add back jsfiddle/codepen link for people to replace/submit issues?
    5. Do we want to support the existing browser use cases: 5a) Explain to people how to use it w/o yarn using cdns including the dependencies? 5b) canvg() without parameters replacing everything? 5c) .drawSvg(...) support (may be useful on node also)?
    6. image.crossOrigin = 'Anonymous' needed?

    @dangreen thoughts?

    opened by gabelerner-kernel 16
  • NS_ERROR_ILLEGAL_VALUE error and some problem SVG files.

    NS_ERROR_ILLEGAL_VALUE error and some problem SVG files.

    From [email protected] on July 12, 2013 02:11:40

    Hello!

    I'm using CanVG to draw some country flags. Thanks for great library, it helped me a lot. Unfortunately, I have problems with some svg files. See attached archive for used svg files and expected and actual results comparison. What steps will reproduce the problem? 0.

    First of all, there is possibly a bug in the svg.ToNumberArray function. I understand that it should be posted as another issue, but in the current state some files (such as sm.svg) just can't be opened at all due to the NS_ERROR_ILLEGAL_VALUE error.

    Proposed quick fix for CanVG v1.3 goes at the bottom.

    1. Use the following code to draw SVG using CanVG: function drawFlag(flagImage) { var c=document.getElementById("myCanvas"); if (flagImage !== null) { var cxt=c.getContext("2d"); cxt.fillStyle = 'rgba(255,255,255,1)'; cxt.fillRect(0, 0, cxt.canvas.width, cxt.canvas.height); cxt.drawSvg( 'Stringified SVG data from web service goes here', 0, 0, cxt.canvas.width, cxt.canvas.height ); } else { c.style.display="none"; } } ... Your browser does not support the canvas element.

    2. Check results visually What is the expected output? What do you see instead? See corresponding png files in the attached archive. Upper image is the CanVG output. Lower image is the expected output (produced by in Firefox) What version of the product are you using? On what operating system? I'm using CanVG v1.3. Some of this files were displayed correctly on v1.2. OS is the Debian Linux. Please provide any additional information below. Proposed quick fix for CanVG v1.3. Change CanVG code:

              svg.ToNumberArray = function(s) {
          var a = svg.trim(svg.compressSpaces((s || '').replace(/,/g, ' '))).split(' ');
                      var result = [];  // added code
          for (var i=0; i<a.length; i++) {
              a[i] = parseFloat(a[i]);
                              if (!isNaN(a[i])) {  // added code
                                  result.push(a[i]);  // added code
                              }  // added code
          }
          return result;  // it was 'return a;'
      }
      

    Otherwise it will fail on sm.svg, and some other files, because it contains stroke-dasharray:none

    The problem code in canvg.js was: if (this.style('stroke-dasharray').hasValue()) { var gaps = svg.ToNumberArray(this.style('stroke-dasharray').value); if (typeof(ctx.setLineDash) != 'undefined') { ctx.setLineDash(gaps); } else if (typeof(ctx.webkitLineDash) != 'undefined') { ctx.webkitLineDash = gaps; } else if (typeof(ctx.mozDash ) != 'undefined') { ctx.mozDash = gaps; }

    Firefox had failed on the last line with the message: Error: NS_ERROR_ILLEGAL_VALUE: Illegal value

    Attachment: buggy.zip

    Original issue: http://code.google.com/p/canvg/issues/detail?id=238

    imported 
    opened by gabelerner 15
  • Separate builds for node and browser

    Separate builds for node and browser

    In this PR the following changes are implemented:

    • there is a single source file canvg.src.js (any modifications must be done in this file from now on)

      • This file is used by Rollup to generate canvg.js and canvg.node.js.
      • I suggest adding a CONTRIBUTING section to README.md or a PR template to remind the contributors not to modify canvg.js nor canvg.node.js. They should modify only canvg.src.js and then build.
    • when running npm run build it will generate canvg.js and canvg.node.js

      • canvg.js is meant for usage in the browser and doesn't use jsdom nor xmldom
      • canvg.node.js is meant for usage in node, and therefore it uses jsdom and xmldom to simulate the window behavior
      • Builds can be generated separately by running npm run build:browser and npm run build:node
    • Tests are ran using AVA and reported to the console using tap-diff. The command is still npm run test.

      • Browser side tests are ran by instantiating a local webserver on port 3123 (can be changed with ENV variables) then using puppeteer to simulate user interaction with a headless browser. Actual generated images are saved to test/actual_browser
      • Node tests are ran with AVA in the same way they are ran actually, but actual results are saved to test/actual_node.
      • browser and node tests can be run separately using npm run test:node and npm run test:browser
    • Both browser and node tests consider the test passed if the generated images are similar (given a certain threshold) to the expected image. Similarity is determined using blink-diff

      • The difference between images, when their difference is above the threshold, are stored in test/diff_node and test/diff_browser for further inspection.
    • given that now we're using a testing framework, the test tasks will exit with non-zero status if any test fails. (prior to this PR, it didn't matter if tests failed). This is the intended behavior for tests tasks if you want to automate them using (for exaple) Travis.

    • files to test are listed in test/_svgs.js as a object with structure {file: description} to provide more info about the test we are running. Prior to this, the files to test where obtained from the svgs folder.

    • Users can test the examples by running npm start and navigating to http://localhost:3123/examples/index.htm. I added this instruction to README.md

    • I added an alternative example index at examples/index.html which also displays

      • The image from test/expected as dataURI
      • The image from test/expected as blob
      • The image from canvg as dataURI (using canvas.toDataURL)
      • The image from canvg as blob (using canvas.toBlob)
    opened by ffflabs 14
  • Support for foreignObject

    Support for foreignObject

    I have a SVG with foreignObject as follows. <svg id="comp_gen_summary" width="912" height="200"><text x="912" y="10" text-anchor="end" font-size="10px" font-family="Axiforma" fill="rgba(0,0,0,.56)">Confidence score 95%</text><g><circle class="legend-circle" cx="5" cy="46" r="5" fill="#00229ed4"></circle><circle class="legend-circle" cx="5" cy="64" r="5" fill="#007fc6d4"></circle><text class="legend-text" x="26" y="49" font-size="10px" font-family="Axiforma" fill="#00229ed4">Men</text><text class="legend-text" x="26" y="67" font-size="10px" font-family="Axiforma" fill="#007fc6d4">Women</text><text x="68.30995178222656" y="67" fill="rgba(0,0,0,.56)" font-size="10px" font-family="Axiforma">- Equality Index</text></g><text x="464" y="46" font-size="10px" font-family="Axiforma" fill="#00229ed4">Pay gap 2018</text><text x="496.80995178222656" y="94" text-anchor="middle" font-size="40px" font-family="Axiforma Medium" fill="#00229ed4">10.4%</text><foreignObject x="696" y="46" width="216" height="154"><body style="font: 14px Axiforma; background-color: rgb(255, 255, 255);">In year 2018 Gender Male's pay gap is 10.37. Male employees are being payed above your Equality Index threshold</body></foreignObject></svg>

    While converting, it is ignoring the foreignObject. Is there any workaround to this? Thanks.

    opened by vijayst 14
  • 3.0.0: RenderContext2D type is lost through babel

    3.0.0: RenderContext2D type is lost through babel

    I'm trying to use 3.0.0 in a project, and its fixed an issue I had with 2.0, so thats great! But there are a few weird things. The first is a type error when trying to use it server-side:

    node_modules/canvg/lib/Transform/types.d.ts:5:18 - error TS2304: Cannot find name 'RenderingContext2D'.
    
    5     unapply(ctx: RenderingContext2D): void;
                       ~~~~~~~~~~~~~~~~~~
    
    

    (and a bunch more)

    it seems that the globals.d.ts file isn't included in the generated lib directory. In general I'm using canvg server side and client side - I would really prefer if you could just use something like tsc to turn the code to modern JS, and let users take care of e.g. async transforms and other rollup/webpack features to support older browsers. (a separate issue took a while to track down because the async transform made it hard to figure out what was throwing).

    Overall this is super work tho!

    opened by bpowers 13
  • Dependency on canvas

    Dependency on canvas

    Hello, I wanted to ask, why canvas was moved from dev dependency to dependency in https://github.com/canvg/canvg/commit/a6bc36b1e3e4bb010d5d135405317666462252c9 - could this be reverted and a new version released?

    opened by pgrm 13
  • [Bug]: Simple SVG is not rendering

    [Bug]: Simple SVG is not rendering

    Would you like to work on a fix?

    • [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

    Current and expected behavior

    The following SVG will not render using Canvg.

    <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="react-sketch-canvas" style="width: 100%; height: 100%;" viewBox="0 0 1059 675" width="1059" height="675"><g id="react-sketch-canvas__eraser-stroke-group" display="none"><rect id="react-sketch-canvas__mask-background" x="0" y="0" width="100%" height="100%" fill="white"></rect></g><defs></defs><g id="react-sketch-canvas__canvas-background-group"><rect id="react-sketch-canvas__canvas-background" x="0" y="0" width="100%" height="100%" fill="white"></rect></g><g id="react-sketch-canvas__stroke-group-0" mask="url(#react-sketch-canvas__eraser-mask-0)"><path id="react-sketch-canvas__0" d="M 238.43209838867188,439.17108154296875 C 238.37274169921875,439.17108154296875 237.90307006835937,439.97108154296876 238.13531494140625, 439.17108154296875 C 238.36755981445313,438.37108154296874 237.9771484375,435.97108154296876 239.59332275390625, 435.17108154296875 C 241.2094970703125,434.37108154296874 241.62747802734376,435.17108154296875 246.2161865234375, 435.17108154296875 C 250.80489501953124,435.17108154296875 251.14334716796876,435.2710815429688 262.536865234375, 435.17108154296875 C 273.9303833007813,435.0710815429687 281.3144897460937,434.87108154296874 303.18377685546875, 434.67108154296875 C 325.0530639648438,434.47108154296876 349.8433471679688,434.2710815429688 371.88330078125, 434.17108154296875 C 393.9232543945312,434.0710815429687 396.82886962890626,434.17108154296875 413.383544921875, 434.17108154296875 C 429.93822021484374,434.17108154296875 437.06492919921874,434.17108154296875 454.65667724609375, 434.17108154296875 C 472.24842529296876,434.17108154296875 482.7284790039063,435.26245727539066 501.34228515625, 434.17108154296875 C 519.9560913085937,433.0797058105469 529.1119018554688,430.9040588378906 547.7257080078125, 428.7142028808594 C 566.3395141601562,426.52434692382815 576.7741577148438,427.0140441894531 594.4113159179688, 423.2218017578125 C 612.0484741210937,419.4295593261719 624.8318969726563,413.06443481445314 635.9114990234375, 409.75299072265625 C 646.9911010742187,406.44154663085936 639.7039428710938,409.7242004394531 649.809326171875, 406.6645812988281 C 659.9147094726562,403.60496215820314 674.3360229492188,398.48902587890626 686.4384155273438, 394.45489501953125 C 698.5408081054687,390.42076416015624 699.9802490234375,390.22630004882814 710.3212890625, 386.4939270019531 C 720.6623291015625,382.7615539550781 728.2006225585938,379.92344970703124 738.1436157226562, 375.79302978515625 C 748.0866088867188,371.66260986328126 754.6994506835938,368.4070251464844 760.0362548828125, 365.8418273925781 C 765.3730590820312,363.27662963867186 761.634521484375,364.6594177246094 764.82763671875, 362.967041015625 C 768.020751953125,361.2746643066406 771.296630859375,360.0413452148438 776.0018310546875, 357.37994384765625 C 780.70703125,354.7185424804687 784.63330078125,352.45399169921876 788.3536376953125, 349.6600341796875 C 792.073974609375,346.86607666015624 791.9567626953125,346.61561889648436 794.603515625, 343.41015625 C 797.2502685546875,340.20469360351564 800.190625,335.5882080078125 801.58740234375, 333.6327209472656" fill="none" stroke-linecap="round" stroke="black" stroke-width="30"></path></g></svg>
    

    Even the demo only produces a blank output for the SVG.

    Reproduction

    https://canvg.js.org/demo/

    Canvg version

    4.0.1

    Possible solution

    Is my SVG invalid/unsupported somehow? I'm able to render it in various online SVGviewers (like so).

    opened by DevonPeroutky 0
  • Add CodeQL workflow for GitHub code scanning

    Add CodeQL workflow for GitHub code scanning

    Hi canvg/canvg!

    This is a one-off automatically generated pull request from LGTM.com :robot:. You might have heard that we’ve integrated LGTM’s underlying CodeQL analysis engine natively into GitHub. The result is GitHub code scanning!

    With LGTM fully integrated into code scanning, we are focused on improving CodeQL within the native GitHub code scanning experience. In order to take advantage of current and future improvements to our analysis capabilities, we suggest you enable code scanning on your repository. Please take a look at our blog post for more information.

    This pull request enables code scanning by adding an auto-generated codeql.yml workflow file for GitHub Actions to your repository — take a look! We tested it before opening this pull request, so all should be working :heavy_check_mark:. In fact, you might already have seen some alerts appear on this pull request!

    Where needed and if possible, we’ve adjusted the configuration to the needs of your particular repository. But of course, you should feel free to tweak it further! Check this page for detailed documentation.

    Questions? Check out the FAQ below!

    FAQ

    Click here to expand the FAQ section

    How often will the code scanning analysis run?

    By default, code scanning will trigger a scan with the CodeQL engine on the following events:

    • On every pull request — to flag up potential security problems for you to investigate before merging a PR.
    • On every push to your default branch and other protected branches — this keeps the analysis results on your repository’s Security tab up to date.
    • Once a week at a fixed time — to make sure you benefit from the latest updated security analysis even when no code was committed or PRs were opened.

    What will this cost?

    Nothing! The CodeQL engine will run inside GitHub Actions, making use of your unlimited free compute minutes for public repositories.

    What types of problems does CodeQL find?

    The CodeQL engine that powers GitHub code scanning is the exact same engine that powers LGTM.com. The exact set of rules has been tweaked slightly, but you should see almost exactly the same types of alerts as you were used to on LGTM.com: we’ve enabled the security-and-quality query suite for you.

    How do I upgrade my CodeQL engine?

    No need! New versions of the CodeQL analysis are constantly deployed on GitHub.com; your repository will automatically benefit from the most recently released version.

    The analysis doesn’t seem to be working

    If you get an error in GitHub Actions that indicates that CodeQL wasn’t able to analyze your code, please follow the instructions here to debug the analysis.

    How do I disable LGTM.com?

    If you have LGTM’s automatic pull request analysis enabled, then you can follow these steps to disable the LGTM pull request analysis. You don’t actually need to remove your repository from LGTM.com; it will automatically be removed in the next few months as part of the deprecation of LGTM.com (more info here).

    Which source code hosting platforms does code scanning support?

    GitHub code scanning is deeply integrated within GitHub itself. If you’d like to scan source code that is hosted elsewhere, we suggest that you create a mirror of that code on GitHub.

    How do I know this PR is legitimate?

    This PR is filed by the official LGTM.com GitHub App, in line with the deprecation timeline that was announced on the official GitHub Blog. The proposed GitHub Action workflow uses the official open source GitHub CodeQL Action. If you have any other questions or concerns, please join the discussion here in the official GitHub community!

    I have another question / how do I get in touch?

    Please join the discussion here to ask further questions and send us suggestions!

    opened by lgtm-com[bot] 0
  • chore(deps): update dependency @swc/helpers to ^0.4.0

    chore(deps): update dependency @swc/helpers to ^0.4.0

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @swc/helpers (source) | ^0.3.2 -> ^0.4.0 | age | adoption | passing | confidence |


    Release Notes

    swc-project/swc

    v0.4.12

    Compare Source

    v0.4.11

    Compare Source

    v0.4.10

    Compare Source

    v0.4.9

    Compare Source

    v0.4.8

    Compare Source

    v0.4.7

    Compare Source

    v0.4.6

    Compare Source


    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 1
  • [Bug]: canvg.resize(...) doesn't work on SVGs with no viewbox

    [Bug]: canvg.resize(...) doesn't work on SVGs with no viewbox

    Would you like to work on a fix?

    • [X] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

    Current and expected behavior

    Tracing through the code, as far as I can tell, in SVGElement.ts

    const viewBoxAttr = this.getAttribute('viewBox')
    //....
     if (!viewBoxAttr.hasValue()) {
          viewBoxAttr.setValue(`0 0 ${originWidth || width} ${originHeight || height}`)
        }
    

    Doesn't work as expected because getAttribute('viewBox') wasn't called with the createIfNotExists parameter set to true, so the viewBoxAttr.setValue(... does nothing.

    https://github.com/canvg/canvg/blob/cd004e5ca121ff1a51f4bd55da6d803d9e95c1f1/src/Document/SVGElement.ts#L161

    Reproduction

    Any SVG with no viewbox attribute can't be resized

    Canvg version

    v4.0.1

    Possible solution

    Add 'true' as a second parameter to this.getAttribute('viewBox' ...)

    opened by jimblackler 1
  • Rendering SVG animations in Node

    Rendering SVG animations in Node

    Would you like to work on this feature?

    • [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

    What problem are you trying to solve?

    I have a node.js process with a canvas that is being exported to a frame buffer as a bitmap (RGBA values in Uint8Array).

    Now I want to draw SVG to this canvas, and found canvg which works well for static SVG images so far.

    But I also need to show animated SVGs. Currently I can only get the first frame of the SVG rendered on the canvas by using v.start() or v.render().

    I understand that in a node.js environment we cannot call requestAnimationFrame() so that's probably why canvg does only render the first frame. It seems to work out of box on the basic example in a browser.

    Describe the solution you'd like

    I'm looking for a way to trigger the rendering again in a node.js process, based on timer or external event, with awareness for the time that has passed since last render, in respect for the animation progress.

      const preset = presets.node({
        DOMParser,
        canvas: Canvas,
        fetch,
      })
    
      const canvas = preset.createCanvas(width, height)
      const ctx = canvas.getContext('2d') // TODO: switch to RGB24
    
      const svgStr = getSVG(t, 'Thank you')
      const v = Canvg.fromString(ctx, svgStr, preset)
      v.start()
     
      async function drawFrame() {
    
        // I need something here to request the next frame of
        // the animation so it can be drawn on the canvas before
        // the canvas is exported as bitmap.
        // Example of what I need:
        await v.nextFrame(new Date().getTime())
       
        const renderedImage = ctx.getImageData(0, 0, width, height)
        const buffer = Buffer.from(renderedImage.data)
        em.emit('newFrame', buffer)
      } 
    
      someTrigger.onEvent(drawFrame)
    

    Describe alternatives you've considered

    No response

    Documentation, Adoption, Migration Strategy

    No response

    opened by esbenvb 0
Releases(v4.0.1)
JavaScript SVG parser and renderer on Canvas

canvg JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders

null 3.3k Jan 4, 2023
🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

React Ape React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainl

Raphael Amorim 1.5k Jan 4, 2023
HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

HTML Canvas Gauges v2.1 Installation Documentation Add-Ons Special Thanks License This is tiny implementation of highly configurable gauge using pure

Mykhailo Stadnyk 1.5k Dec 30, 2022
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching,

konva 8.7k Jan 8, 2023
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Jan 9, 2023
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

D3: Data-Driven Documents D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, C

D3 103.8k Jan 3, 2023
📸 Generate image using HTML5 canvas and SVG

egami → image README | 中文文档 Generate image using HTML5 canvas and SVG Fork from html-to-image Installation pnpm pnpm add egami npm npm i egami Usage i

weng 12 Jan 3, 2023
Demonstration of liquid effect on HTML Canvas using Matter.js and SVG Filters (Blur + Contrast)

Canvas Liquid Effect Demonstration of liquid (or gooey) effect on HTML Canvas using Matter.js and SVG Filters (feGaussianBlur and feColorMatrix). DEMO

Utkarsh Verma 78 Dec 24, 2022
Canvas rendering library, Sprite manipulation of canvas

el-canvas Canvas rendering library, Sprite manipulation of canvas hello world <div id="app"><div></div></div> yarn add elem-canvas or npm i

null 15 Apr 13, 2022
A renderer agnostic two-dimensional drawing api for the web.

Two.js A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, c

Jono Brandel 7.9k Dec 31, 2022
Flat, round, designer-friendly pseudo-3D engine for canvas & SVG

Zdog Round, flat, designer-friendly pseudo-3D engine View complete documentation and live demos at zzz.dog. Install Download zdog.dist.min.js minified

Metafizzy 9.5k Jan 3, 2023
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http:

Paper.js 13.5k Dec 30, 2022
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Jan 3, 2023
🔥 JavaScript Library for HTML5 canvas based heatmaps

heatmap.js Dynamic Heatmaps for the Web. How to get started The fastest way to get started is to install heatmap.js with bower. Just run the following

Patrick Wied 5.9k Jan 2, 2023
JAVASCRIPT library with which you can easily draw CANVAS HTML

easycanvas Quick start Documentation: gaidadei.ru/easycanvas Download: gaidadei.ru/easycanvas/easyc.zip Buy premium: gaidadei.ru/easycanvas/premium (A

null 18 Nov 12, 2022
The JavaScript library for modern SVG graphics.

Snap.svg · A JavaScript SVG library for the modern web. Learn more at snapsvg.io. Follow us on Twitter. Install Bower - bower install snap.svg npm - n

Adobe Web Platform 13.6k Dec 30, 2022
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 973 Jan 3, 2023
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 937 Feb 5, 2021
📊 Interactive JavaScript Charts built on SVG

A modern JavaScript charting library to build interactive charts and visualizations with simple API. Our Partner ApexCharts is now a partner of Fusion

ApexCharts 12.1k Jan 3, 2023