Work around tained canvas error in Internet Explorer

[RoelN]

IE (not Edge) will throw a SCRIPT5022: SecurityError when running ChromaCheck. This is because writing an SVG to the canvas taints the canvas, disallowing ChromaCheck to look at the drawn pixels:

Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods; doing so will throw a security error.

See also this StackOverflow issue.

We draw an SVG to the canvas to work around an older Firefox issue. Maybe drop the SVG workaround? Or skip the SVG method for IE/non-Fx?

[idreamsahan]

do three things,

1. get the SVG and parse it using XMLSerializer
2. change the canvas height and width before drawing the SVG
3. use "canvg" library to parse the SVG instead of using the canvas on browser with native canvas methods.

`//Get SVG element and then serialize it to convert to a stream of String
var svg = document.querySelectorAll('svg');
var base64 = [];
for(i=0; i < svg.length; i++){
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svg[i]);
var canvas = document.querySelectorAll('canvas');
var render_width = 1000;
var render_height = 600;

//CHange/Set Canvas width/height attributes to reset origin-clean flag
canvas[i].height = render_height;
canvas[i].width = render_width;

//Use canvg library to parse SVG and draw the image on given canvas
canvg(canvas[i], svgString, {
useCORS: true,
scaleWidth: render_width,
scaleHeight: render_height,
ignoreDimensions: true,
log: true
});

//Convert canvas to png formated dataURL and save the body of it
var rawImage = canvas[i].toDataURL("image/png");

//Array containing all the images in the form of base64 data URLs.
base64ImageArray.push(rawImage);
}`

Hope this helps.

[RoelN]

Hi @idreamsahan, thanks for your suggestion! I'm not to keen on including another library just to get this test off the ground. I'm considering drawing regular glyphs to the canvas, instead of via the SVG workaround, and read the color values from there. I'll effectively have two results then, and if one of them indicated the color fonts has been rendered, I'm good. Not as clean, but should only add a few more lines of JavaScript.