0

I'm trying to draw the contents of an SVG tag onto a canvas, then get the stream and output a video of the animated SVG. This feature was working correctly in my app until a few months ago. I'm unable to pinpoint what's causing it to now fail. I don't have this issue in FireFox, only Chrome.

From a few hours of debugging, I now think that somehow, when I draw the image on the canvas, it taints it. When a canvas is tainted, there's no way to retrieve the data afterwards. Here's the function that draws on to the canvas:

DrawToCanvas(node) {
    var serializer = new XMLSerializer();
    var source = serializer.serializeToString(node);     // node is the SVG node with the animated content
    var cv = this.Elem("canvas");                        // this.Elem("canvas") returns the canvas node 
    
    // create a file blob of our SVG.
    var blob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
    var url = window.URL.createObjectURL(blob);
    var ctx = cv.getContext('2d');
    var img = new Image();

    img.onload = function() {
        ctx.fillStyle = "#f9f9f9";
        ctx.fillRect(0, 0, cv.getAttribute("width"), cv.getAttribute("height"));
        ctx.drawImage(img, 0, 0, cv.getAttribute("width"), cv.getAttribute("height"));
        
        // In the console, if I call ctx.captureStream() here, I get an error: Uncaught DOMException: 
        // Failed to execute 'captureStream' on 'HTMLCanvasElement': Canvas is not origin-clean.

        window.URL.revokeObjectURL(url);
    }
    
    img.src = url;
}

Elsewhere in the app, I create a MediaRecorder from the canvas stream. The user starts and stops it with a button. Whenever dataavailable fires, the data size is 0.

    this.recorder = new MediaRecorder(canvas.captureStream(), { mimeType: 'video/webm' }); // init the recorder
    
    this.recorder.ondataavailable = (function(ev) {
        if (ev.data && ev.data.size > 0) this.chunks.push(ev.data);
    }).bind(this);

Why would an image created by the window taint the canvas? Can someone show me what I'm doing wrong? Thanks.

user164179
  • 1
  • 1
  • Depends what's in the SVG but I think foreignObject tags cause the canvas to taint in Chrome. – Robert Longson Sep 11 '21 at 22:51
  • Interesting. I do have foreign Object tags in my SVG. That would be a serious issue at this point. I'll give it a try as soon as possible. Thanks! – user164179 Sep 11 '21 at 23:19
  • ForeignObjects are new in my SVGs since few months so it's a likely culprit. I'll test in an hour or two. – user164179 Sep 11 '21 at 23:24

0 Answers0