JSFiddle - React, Tailwind, and code Playground

by ngoctuan001

HTML

<canvas id="canvas1" width="400" height="400"></canvas>

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="150" height="150" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)"/>
</svg>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var data = `data:image/svg+xml;base64,charset="utf-8"`
var svg = document.getElementById('mySVG');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,charset="utf-8';
var image64 = b64Start + svg64;
console.log(image64);

var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = image64;