HTML画布到png图像不起作用

Question

我在使用画布编辑器时遇到了问题。 我有<canvas>元素id=CANVA和<img>元素id=CANVAS_IMAGE，创建元素后我想将其转换为png image：

var canvas = document.getElementById('CANVA');  
var bg = new Image();
var muster = new Image();
var cat1 = new Image();
var cat2 = new Image();
var cat3 = new Image();
var haustierBild = new Image();
bg.onload = function(){
    if(canvas.getContext){
        var context = canvas.getContext('2d');
        context.clearRect ( 0 , 0 , 246, 227);
        context.drawImage(bg, 0, 0, 246, 192);
        context.drawImage(haustierBild, 8, 30, 230, 100);
        context.drawImage(muster, 0, 0, 246, 227);
        switch(seltenheit) {
        case "1":
           context.fillStyle = '#dedede';
           break;
        case "2":
           context.fillStyle = '#00b4fc';
           break;
        case "3":
           context.fillStyle = '#FFDD00';
           break;
        }
        context.font = 'bold 14px Arial';
        context.textBaseline = 'top';
        context.fillText(name, 38, 12);
        switch(kategorie) {
        case "1":
           context.drawImage(cat1, 7, 7, 25, 25);
           break;
        case "2":
           context.drawImage(cat2, 7, 7, 25, 25);
           break;
        case "3":
           context.drawImage(cat3, 7, 7, 25, 25);
           break;
        }
        if (parseInt(level) >= 50) {
           context.fillStyle = '#FFDD00';
        } else {
           context.fillStyle = '#dedede';
        }
        context.font = 'bold 13px Arial';
        context.fillText(level, 24 - (level.length * 4), 134);
        context.fillStyle = '#dedede';
        context.fillText(ausdauer, 50 - (ausdauer.length * 4), 176);
        context.fillText(kampfkraft, 106 - (kampfkraft.length * 4), 176);
        context.fillText(spuernase, 163 - (spuernase.length * 4), 176);
        context.fillText(wachsamkeit, 221 - (wachsamkeit.length * 4), 176);
        context.fillStyle = '#ffffff';
        var ausdauerGesamt = parseInt(ausdauer) * 10;
        var ausdauerText = ausdauerGesamt + '/' + ausdauerGesamt;
        context.fillText(ausdauerText, 100 - (ausdauer.length * 7), 152);
        }
     }
  bg.src = 'http://img.webme.com/pic/p/penner-items/haustier-editor_bg.png';
  muster.src = 'http://img.webme.com/pic/p/penner-items/haustier-editor_muster.png';
  cat1.src = 'http://img.webme.com/pic/p/penner-items/haustier_cat1.png';
  cat2.src = 'http://img.webme.com/pic/p/penner-items/haustier_cat2.png';
  cat3.src = 'http://img.webme.com/pic/p/penner-items/haustier_cat3.png';
  haustierBild.src = document.getElementById('BildSrc').value;

  // Here I want to convert the canvas into png image

  var dataURL = canvas.toDataURL("image/png");
  document.getElementById('CANVAS_IMAGE').src = dataURL;

创建作品，将显示画布图像（当我删除display = none时），但png图像是空图像：

<canvas style="display:none;" width="246" height="227" id="CANVA">No HTML5</canvas>
<img id="CANVAS_IMAGE" alt="" />

我搜索了其他网站，每个网站都显示了方法toDataURL（），但这不起作用。有人有想法吗？