JavaScript HTML5 Canvas Code ne fonctionne pas, avec canvas.toDataURL()

Question

Je n'ai pas réussi à obtenir ce travail de code:

(function() { 
    // Creates a new canvas element and appends it as a child 
    // to the parent element, and returns the reference to 
    // the newly created canvas element 


    function createCanvas(parent, width, height) { 
     var canvas = {}; 
     canvas.node = document.createElement('canvas'); 
     canvas.context = canvas.node.getContext('2d'); 
     canvas.node.width = width || 100; 
     canvas.node.height = height || 100; 
     parent.appendChild(canvas.node); 
     return canvas; 
    } 

    function init(container, width, height, fillColor) { 
     var canvas = createCanvas(container, width, height); 
     var ctx = canvas.context; 
     // define a custom fillCircle method 
     ctx.fillCircle = function(x, y, radius, fillColor) { 
      this.fillStyle = fillColor; 
      this.beginPath(); 
      this.moveTo(x, y); 
      this.arc(x, y, radius, 0, Math.PI * 2, false); 
      this.fill(); 
     }; 
     ctx.clearTo = function(fillColor) { 
      ctx.fillStyle = fillColor; 
      ctx.fillRect(0, 0, width, height); 
     }; 
     ctx.clearTo(fillColor || "#ddd"); 

     // bind mouse events 
     canvas.node.onmousemove = function(e) { 
      if (!canvas.isDrawing) { 
       return; 
      } 
      var x = e.pageX - this.offsetLeft; 
      var y = e.pageY - this.offsetTop; 
      var radius = 10; // or whatever 
      var fillColor = '#ff0000'; 
      ctx.fillCircle(x, y, radius, fillColor); 
     }; 
     canvas.node.onmousedown = function(e) { 
      canvas.isDrawing = true; 
     }; 
     canvas.node.onmouseup = function(e) { 
      canvas.isDrawing = false; 
     }; 
    } 

    var container = document.getElementById('canvas'); 
    init(container, 200, 200, '#ddd'); 

})(); 

function hi(){ 
var canvas = document.getElementsByTagName('canvas'); 
var imageData = canvas.toDataURL(); 
    document.getElementById("his").innerHTML=imageData; 
} 

Il est un peu de code JavaScript, ce qui crée une petite toile dans le div avec le id de canvas.

Et, j'essaye de faire l'image sauver, et écris à un div avec le id de his l'image enregistrée. MAINTENANT c'est là que le code cesse de fonctionner ... J'apprécierais grandement votre aide, merci! :)

Answer 1

document.getElementsByTagName('canvas') renvoie un NodeList, pas un seul élément. Donc, utilisez

function hi(){ 
    var canvas = document.getElementsByTagName('canvas')[0]; 
    imageData = canvas ? canvas.toDataURL() : "could not find a <canvas> element"; 
    document.getElementById("his").textContent = imageData; 
} 

Answer 2

Les données d'image doivent appartenir à l'attribut image src. Les images n'ont pas innerHTML.