JSFiddle - React, Tailwind, and code Playground

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"  class="transform"></canvas>
                <div><b>Comment</b></div>

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

CSS

.transform {
    -ms-transform:translateX(200px) rotate(40deg) translateY(130px); /* IE 9 */
    -webkit-transform:translateX(200px) rotate(40deg) translateY(130px); /* Chrome, Safari, Opera */
    transform:translateX(200px) rotate(40deg) translateY(130px);
    background:#FF0000;
}

JavaScript

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