JSFiddle - React, Tailwind, and code Playground

by gwwar

HTML

<img id="test" src='data:image/svg+xml;utf8,<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>' />
<canvas id="canvas" width="800" height="800"/>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById('test');
ctx.drawImage(img, 0, 0);
console.log(canvas.toDataURL());