<div id="source-image">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="250" width="250" viewBox="-1 -1 250 250">
    <g>
      <path id="uniqueDomId-195" fill="#C0504D" fill-opacity="1" stroke="#8C3836" stroke-opacity="1" stroke-width="1" stroke-linecap="flat" stroke-linejoin="round" d="M50,40 L60,87 12,92 42,129 0,146 37,174 12,201 55,203 55,241 84,203 97,221 109,193 129,211 136,179 166,193 164,159 211,174 184,139 203,126 191,104 241,74 181,72 201,37 161,64 164,2 129,47 109,22 97,72Z" transform="translate(0.5, 0.5)" ></path>
    </g>
  </svg>
</div>


<canvas id="canv"></canvas>

<div id="img"></div>

<br />
<p id="output"></p>
div, img {
  float: left;
}
var SVG_DATA_IMG = 'data:image/svg+xml;base64, ';
var utf8_to_b64 = function(str) {
    str = str.replace(/\&nbsp\;/g, ' ');
    return window.btoa(unescape(encodeURIComponent(str)));
};
var svg = document.querySelector('#source-image');
var canvas = document.querySelector('#canv');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = 'Anonymous';

img.src = SVG_DATA_IMG + utf8_to_b64(svg.innerHTML);

document.querySelector('#img').appendChild(img);

img.addEventListener('load', function() {
   canvas.width = img.offsetWidth;
   canvas.height = img.offsetHeight;
   console.log('loaded', ctx, canvas);
   ctx.drawImage(img, 0, 0);
   var centerPix = ctx.getImageData(canvas.width / 2, canvas.height / 2, 1, 1).data;
   document.querySelector('#output').innerHTML = [ 
     'center pixel color is:', centerPix[0], centerPix[1], centerPix[2], centerPix[3] ].join(', ')
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.