canvg playground

by rajeshpillai

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
<canvas id="canvas" width="400px" height="200px"></canvas>
<svg  id="id" width="100%" height="100%" viewBox="-60 30 1300 550" preserveAspectRatio=""><g transform="translate(80,100)"><path class="path" stroke="#cccccc" stroke-width="4" d="M74.78260869565217,6.4763235294116726L112.17391304347825,5.740661764705806" style="fill: none; fill-opacity: 0.5; stroke-dasharray: 3, 3;"></path><path class="path" stroke="#FF56F9" stroke-width="4" d="M0,7.94764705882352ZM149.56521739130434,5.004999999999939L186.95652173913044,-5L224.3478260869565,53.69599999999997L261.7391304347826,2.3369999999999322L299.1304347826087,2.3369999999999322L336.5217391304348,-5L373.9130434782609,-5L411.304347826087,-5L448.695652173913,2.3369999999999322L486.08695652173907,-5L523.4782608695652,2.3369999999999322L560.8695652173914,-5" style="fill: none; fill-opacity: 0.5;"></path>
       <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="100" width="100"/>
      <image xlink:href="/1635cbf92c41da807a6846d56bd335a4.png" x="-17" y="-12.05235294117648" width="40" height="50"></image><image xlink:href="/1635cbf92c41da807a6846d56bd335a4.png" x="132.56521739130434" y="-14.995000000000061" width="40" height="50"></image><image xlink:href="/1635cbf92c41da807a6846d56bd335a4.png" x="169.95652173913044" y="-25" width="40" height="50"></image><image xlink:href="/1635cbf92c41da807a6846d56bd335a4.png" x="207.3478260869565" y="33.69599999999997" width="40" height="50"></image><image xlink:href="/1635cbf92c41da807a6846d56bd335a4.png" x="244.73913043478262" y="-17.663000000000068" width="40" height="50"></image><image xlink:href="/1635cbf92c41da807a6846d56bd335a4.png" x="282.1304347826087"...

JavaScript

svg = `<svg  id="id" width="100%" height="100%" viewBox="-60 30 1300 550" preserveAspectRatio=""><g transform="translate(80,100)"><path class="path" stroke="#cccccc" stroke-width="4" d="M74.78260869565217,6.4763235294116726L112.17391304347825,5.740661764705806" style="fill: none; fill-opacity: 0.5; stroke-dasharray: 3, 3;"></path><path class="path" stroke="#FF56F9" stroke-width="4" d="M0,7.94764705882352ZM149.56521739130434,5.004999999999939L186.95652173913044,-5L224.3478260869565,53.69599999999997L261.7391304347826,2.3369999999999322L299.1304347826087,2.3369999999999322L336.5217391304348,-5L373.9130434782609,-5L411.304347826087,-5L448.695652173913,2.3369999999999322L486.08695652173907,-5L523.4782608695652,2.3369999999999322L560.8695652173914,-5" style="fill: none; fill-opacity: 0.5;"></path>
       <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="100" width="100"/>
      <image xlink:href="/1635cbf92c41da807a6846d56bd335a4.png" x="-17" y="-12.05235294117648" width="40" height="50"></image><image xlink:href="/1635cbf92c41da807a6846d56bd335a4.png" x="132.56521739130434" y="-14.995000000000061" width="40" height="50"></image><image xlink:href="/1635cbf92c41da807a6846d56bd335a4.png" x="169.95652173913044" y="-25" width="40" height="50"></image><image xlink:href="/1635cbf92c41da807a6846d56bd335a4.png" x="207.3478260869565" y="33.69599999999997" width="40" height="50"></image><image xlink:href="/1635cbf92c41da807a6846d56bd335a4.png" x="244.73913043478262" y="-17.663000000000068" width="40" height="50"></image><image xlink:href="/1635cbf92c41da807a6846d56bd335a4.png" x="282.1304347826087" y="-17.663000000000068" width="40" height="50"></image><image xlink:href="/1635cbf92c41da807a6846d56bd335a4.png" x="319.5217391304348" y="-25" width="40" height="50"></image><image xlink:href="/1635cbf92c41da807a6846d56bd335a4.png" x="356.9130434782609" y="-25" width="40" height="50"></image><image...