JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <g transform="translate(100, 100)">
    <foreignObject x="0" y="0" width="100" height="100">
        <xhtml:canvas x="0" y="0" width="100" height="100"></xhtml:canvas>
    </foreignObject>
  </g>
</svg>

JavaScript

var xhtmlNS = 'http://www.w3.org/1999/xhtml';
var context = document.getElementsByTagNameNS(xhtmlNS, 'canvas')[0].getContext('2d');
context.fillStyle = 'rgba(0,200,0,0.7)';
context.fillRect(0,0,100,75);