Javascript HTML将图像从画布复制到另一画布

我想从第一个画布生成一个图像，然后在另一个画布中绘制，但我有一个问题，因为我不知道为什么在另一个画布中什么都看不到。这是我的密码：

<canvas id="gameCanvas" width="704" height="608" />
<script type='text/javascript'>
    // prepaire our game canvas
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");
        var ctx = document.createElement("canvas").getContext("2d");
        ctx.canvas.width = 2048;
        ctx.canvas.height = 2048;   

        var rows = 64;
        var columns = 64;
        this.image = new Image();
        var imageObject = document.createElement("img");
        var me = this;

        /// need this as loading is async
        imageObject.onload = function() {    
            for (var i = 0; i < rows; i++) {        
                for (var j=0; j <columns; j++) {  
                    ctx.drawImage(this, i*32,j*32,32,32); 
                }   
            }       
            // store the generate map as this image texture
            me.image.src = ctx.canvas.toDataURL("image/jpg");                 
        }

        imageObject.src='ground.jpg';
        this.image.src = ctx.canvas.toDataURL("image/jpg");     


        context.drawImage(this.image, 0, 0, 300, 300, 0, 0, 300,300);       
</script>

//为我们的游戏画布预先准备好
var canvas=document.getElementById（“gameCanvas”）；
var context=canvas.getContext（“2d”）；
var ctx=document.createElement（“canvas”）.getContext（“2d”）；
ctx.canvas.width=2048；
ctx.canvas.height=2048；
var行=64；
var列=64；
this.image=新图像（）；
var imageObject=document.createElement（“img”）；
var me=这个；
///需要这个，因为加载是异步的
imageObject.onload=函数（）{
对于（var i=0；i将画布转换为DataURL，然后将图像源设置为该DataURL，这是不必要的。这是因为
context.drawImage
可以处理
，就像它可以处理
This.image.src
画布的DataURL一样，然后将该图像用于e> 此时，画布可能仍然是空的，因此数据url也将是空图像的url
解决方案：将代码的最后一行放入onload函数

将画布转换为DataURL，然后将图像源设置为该DataURL，这是不必要的。这是因为
context.drawImage
可以处理
，就像它可以处理
This.image.src
画布的DataURL一样，然后将该图像用于e> 此时，画布可能仍然是空的，因此数据url也将是空图像的url
解决方案：将代码的最后一行放入onload函数。
创建DOM元素后，应将其附加到另一个元素上以显示它

试试这个


脚本：

var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");
        var image=document.createElement("img");
        image.onload=function(){ 
            canvas.width = image.width;
            canvas.height=image.height;
            ctx.drawImage(image,0,0); 
            var tcanvas = document.createElement('canvas');
            var tctx = tcanvas.getContext('2d');
            tcanvas.width = 8*image.width;
            tcanvas.height = 8*image.height;
            for(var i=0;i<8;i++){
                for(var j=0;j<8;j++){
                      tctx.drawImage(image, i*image.width,j*image.height); 
                    document.body.appendChild(tcanvas);
                }
            }
        }
   image.src="https://lh4.googleusercontent.com/-L1cr04d6ONc/RsRykgOl9zI/AAAAAAAABIE/WqBGOdiJnys/s128/Finishes.Flooring.Tile.Square.Blue.bump.jpg";

var canvas=document.getElementById（“gameCanvas”）；
var ctx=canvas.getContext（“2d”）；
var image=document.createElement（“img”）；
image.onload=function（）{
canvas.width=image.width；
canvas.height=image.height；
ctx.drawImage（图像，0,0）；
var tcanvas=document.createElement（'canvas'）；
var tctx=tcanvas.getContext（'2d'）；
tcanvas.width=8*image.width；
tcanvas.height=8*image.height；
对于（var i=0；i，在创建DOM元素之后，应该将它附加到另一个元素上以显示它

试试这个


脚本：

var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");
        var image=document.createElement("img");
        image.onload=function(){ 
            canvas.width = image.width;
            canvas.height=image.height;
            ctx.drawImage(image,0,0); 
            var tcanvas = document.createElement('canvas');
            var tctx = tcanvas.getContext('2d');
            tcanvas.width = 8*image.width;
            tcanvas.height = 8*image.height;
            for(var i=0;i<8;i++){
                for(var j=0;j<8;j++){
                      tctx.drawImage(image, i*image.width,j*image.height); 
                    document.body.appendChild(tcanvas);
                }
            }
        }
   image.src="https://lh4.googleusercontent.com/-L1cr04d6ONc/RsRykgOl9zI/AAAAAAAABIE/WqBGOdiJnys/s128/Finishes.Flooring.Tile.Square.Blue.bump.jpg";

var canvas=document.getElementById（“gameCanvas”）；
var ctx=canvas.getContext（“2d”）；
var image=document.createElement（“img”）；
image.onload=function（）{
canvas.width=image.width；
canvas.height=image.height；
ctx.drawImage（图像，0,0）；
var tcanvas=document.createElement（'canvas'）；
var tctx=tcanvas.getContext（'2d'）；
tcanvas.width=8*image.width；
tcanvas.height=8*image.height；
对于（var i=0；i