JSFiddle - React, Tailwind, and code Playground
by mhctoledo
HTML
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas -->
<canvas id="canvas" style="border:2px solid black;" width="1200" height="200">
</canvas>JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg version="1.1" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="1108" height="191"><desc>Created with Highcharts 4.1.5</desc><defs><clipPath id="highcharts-1"><rect x="0" y="0" width="97" height="1088"/></clipPath></defs><rect x="0" y="0" width="1108" height="191" strokeWidth="0" fill="#FFFFFF" class=" highcharts-background"/><g class="highcharts-grid" zIndex="1"/><g class="highcharts-grid" zIndex="1"><path fill="none" d="M 9.5 10 L 9.5 107" stroke="#D8D8D8" stroke-width="1" zIndex="1" opacity="1"/><path fill="none" d="M 63.5 10 L 63.5 107" stroke="#D8D8D8" stroke-width="1" zIndex="1" opacity="1"/><path fill="none" d="M 118.5 10 L 118.5 107" stroke="#D8D8D8" stroke-width="1" zIndex="1" opacity="1"/><path fill="none" d="M 172.5 10 L 172.5 107" stroke="#D8D8D8" stroke-width="1" zIndex="1" opacity="1"/><path fill="none" d="M 227.5 10 L 227.5 107" stroke="#D8D8D8" stroke-width="1" zIndex="1" opacity="1"/><path fill="none" d="M 281.5 10 L 281.5 107" stroke="#D8D8D8" stroke-width="1" zIndex="1" opacity="1"/><path fill="none" d="M 335.5 10 L 335.5 107" stroke="#D8D8D8" stroke-width="1" zIndex="1" opacity="1"/><path fill="none" d="M 390.5 10 L 390.5 107" stroke="#D8D8D8" stroke-width="1" zIndex="1" opacity="1"/><path fill="none" d="M 444.5 10 L 444.5 107" stroke="#D8D8D8" stroke-width="1" zIndex="1" opacity="1"/><path fill="none" d="M 499.5 10 L 499.5 107" stroke="#D8D8D8" stroke-width="1" zIndex="1" opacity="1"/><path fill="none" d="M 553.5 10 L 553.5 107" stroke="#D8D8D8" stroke-width="1" zIndex="1" opacity="1"/><path fill="none" d="M 607.5 10 L 607.5 107" stroke="#D8D8D8" stroke-width="1" zIndex="1" opacity="1"/><path fill="none" d="M 662.5 10 L 662.5 107" stroke="#D8D8D8" stroke-width="1" zIndex="1" opacity="1"/><path fill="none" d="M 716.5 10 L 716.5...