在新窗口中打开时未在画布中绘制图像答案

【问题标题】：Image not being drawn in canvas when opened in new window在新窗口中打开时未在画布中绘制图像
【发布时间】：2016-08-01 18:41:09
【问题描述】：

我可以毫无问题地在画布上绘制图像。但我希望在新窗口的画布上绘制图像。变量具有正确的值，但仍然没有绘制任何内容。

这是我的代码：

var popup = window.open();

popup.oldCanvas= oldCanvas;

popup.url = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

popup.document.open();

popup.document.write("<html><head>");

popup.document.write('<script src="lib/jquery/jquery-2.1.1.min.js"></script>');

popup.document.write("<script>\n");

popup.document.write("$(document).ready(function() { \n");

popup.document.write("    function createCanvas() {                         \n");

popup.document.write("        var img = new Image;\n");

popup.document.write("        var newCanvas = document.createElement('canvas');\n");

popup.document.write("        var context = newCanvas.getContext('2d');        \n");

popup.document.write("        newCanvas.width = oldCanvas.width;           \n");

 popup.document.write("        newCanvas.height = oldCanvas.height;         \n");

popup.document.write("        img.onload = function() {\n");

popup.document.write("              context.drawImage(this, 0, 0);                    \n");

popup.document.write("        };                                                \n");

popup.document.write("        img.src = url;                                    \n");

 popup.document.write("    };                                                   \n");

popup.document.write("    createCanvas();                                      \n");

popup.document.write("});                                                      \n");

popup.document.write("</script>");

popup.document.write("</head><body>");

popup.document.write("</body>");

popup.document.write("</html>");

popup.document.close();

请告诉我我做错了什么，因为相同的代码在没有在新窗口中绘制时可以正常工作。

【问题讨论】：

如果将console.log(oldCanvas) 放在$(document).ready 下一行会怎样？
打印 HTML 画布元素：<canvas id="mycanvas" width="100" height="100">
在 document.write 版本中？你能把它放在一个jsfiddle吗？
这里是 plnkr：plnkr.co/edit/yZSTtAGdVVsSWmbfFJ0F

标签： javascript canvas html5-canvas drawimage

【解决方案1】：

画布已创建但从未插入 DOM：

var newCanvas = document.createElement('canvas');
document.body.appendChild(newCanvas);              // add to DOM
...

【讨论】：