JSFiddle - React, Tailwind, and code Playground

by Vladimir Agafonov

CSS

img {
  outline: 2px solid red;
}

JavaScript

'use strict';

var image = new Image();
var canvas = document.createElement("canvas");
var canvasContext = canvas.getContext("2d");
var svg =
	"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
  	"<foreignObject width='200' height='200'>" +
    	"<body xmlns='http://www.w3.org/1999/xhtml'>" +
      	"<input type='password' value='Hello world!' />" +
			"</body>" +
		"</foreignObject>" +
   "</svg>";

document.body.appendChild(image);

image.onload = function () {
  canvas.width = image.width;
  canvas.height = image.height;
  canvasContext.drawImage(image, 0, 0, image.width, image.height);
  var data = canvasContext.getImageData(0, 0, image.width, image.height).data;
  console.log(data);
};

image.src = "data:image/svg+xml;charset=utf-8," + svg;