JSFiddle - React, Tailwind, and code Playground

by Surre

HTML

<body>
  <svg width="400px" height="300px" viewBox="0 0 400 300"
       xmlns="http://www.w3.org2000/svg">
       <g transform='translate(250,10)rotate(40)'>
         <foreignObject id="foo" height="700" width="370" y="0" x="0">
             <span xmlns="http://www.w3.org/1999/xhtml"> <!--//class="tooltip">-->
                             <canvas id="canvas" width="400px" height="300px" fill-style="#FF0000"></canvas>
                <div><b>Comment</b></div>

             </span>
         </foreignObject>
       </g>
  </svg>
</body>

JavaScript

var c = document.getElementById("canvas");
var g = c.getContext("2d");
g.fillRect(10,10,150,150)