Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

185
Views
SVG to canvas to .webm, not origin-clean

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.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!