Use ctx.drawImage on a canvas from a different (child) window (working on Firefox, not working on IE11)

JavaScript
1

I have a main window where I draw on a canvas and I need to mirror the drawing to a secondary window containing another identical canvas. The first window is opened from a page where you press on a button and with window.open it opens, this window, while loading, uses window.open again to create the secondary (mirror) page. This is a screenshot of what it looks like:

1435×660 50.9 KB
Note that this has to work with IE11 (this very same code works on Firefox flawlessy but unfortunately I need it on IE11). The drawing must be copied in real time (pixel by pixel).

When I use drawImage on the canvas present on the secondary window I get an error. This is the code I’m using:

var mirrorCanvas = mirrorWindow.myCanvas;
var mirrorCanvasCtx = mirrorCanvas.getContext('2d');
var currentCanvas = document.getElementById('myCanvas');
mirrorCanvasCtx.drawImage(currentCanvas, 0, 0);

The error is “SCRIPT5022: Exception thrown and not caught” and the line causing it is “mirrorCanvasCtx.drawImage(currentCanvas, 0, 0);”; if I comment this line, there is no error.

Why I get an error on mirrorCanvasCtx.drawImage(currentCanvas, 0, 0); only on IE?

2

[quote=“stardust, post:1, topic:288611, full:true”]
The error is “SCRIPT5022: Exception thrown and not caught”[/quote]

That error is known to occur when the HTML <canvas> tag is used with Internet Explorer, and can be avoided by crating the canvas tag from the scripting code instead. Could that be the case here?

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.