DrawCanvas IE-FF CORS Issue

by Joe Blow

HTML

<div>
<img id='svgImage' height="140" width="140" crossorigin='anonymous' alt='image'>
<canvas id="dest" width="100" height="100" alt='canvas'></canvas>
<img id='copiedImage' crossorigin='anonymous'> 
  <div>
  <span>Drawn from SVG</span>
  <canvas id="dest2" width="200" height="200" style="display:none" alt="drawn from SVG"></canvas>
  </div>
</div>

JavaScript

var image2 = document.getElementById('svgImage');
//image2.crossOrigin='anonymous';
var destCanvas = document.getElementById('dest');
var dest2Canvas = document.getElementById('dest2');
var context2 = dest2Canvas.getContext('2d', {preserveDrawingBuffer: true});
image2.onload = function() {
    console.log('image loaded src:' + image2.src);
    var context = destCanvas.getContext('2d', {preserveDrawingBuffer: true});
    //destCanvas.height = image2.height;
    //destCanvas.width = image2.width;

    //drawImage timing error: SCRIPT65535: Unexpected call to method or property access.
    //getImageData: SecurityError
    setTimeout(function() {
    console.log('drawing image');
    context.drawImage(image2, 0, 0, destCanvas.width, destCanvas.width);

      //setTimeout(function() {
      console.log('reading pixel data');
      var test = context.getImageData(0,0, destCanvas.width, destCanvas.height);
      var test2 =destCanvas.toDataURL('image/jpeg');
          console.log(test.data.length + ' : ' + test2.length);
          var copiedImage = document.getElementById('copiedImage');
          copiedImage.src = test2;
          console.log('sample pixels:' + test.data[0] + test.data[test.data.length-1]  );
     // },1000);
    
    },0);
	}

console.log('setting image.src');
//image2.src="https://static.prvd.com/siteimages/stickers/1_nesting...