DrawImage на динамически созданный холст

Question

первых see this Fiddle

Я хочу создать холст на лету и добавить его к конкретному DIV и нарисовать встроенный SVG на холсте. Но не работает так, как ожидалось.

var randn = '1'; 

    function createme(){ 
     alert("completed 0"); 
      var crCavs = $('<canvas />',{ id : 'mycanvs'+randn }) 

      $('#album').append(crCavs); 
     alert("completed 1"); 

      var svg2 =document.getElementById('sVgsource'+randn).outerHTML, 
       vms =document.getElementById('mycanvs'+randn), // target canvas 
       ctx2 =vms.getContext('2d'); 

      //callback 
      svgToImage(svg2, function(img2){ 
      vms.width =$('#sVgsource'+randn).width(); 
      vms.height =$('#sVgsource'+randn).height(); 
      alert("completed 3"); 
      ctx2.drawImage(img2, 30, 40); 
       alert("completed 4"); 
      } 

      function svgToImage(svg2, callback) { 
      var nurl = "data:image/svg+xml;utf8," + encodeURIComponent(svg2), 
       img2 = new Image; 
      //invoke callback 
       callback(img2); 

       img2.src = nurl; 
       alert("completed 2"); 
      } 
    } 
    createme(); 

Answer 1

Вы пропускаете торцевую скобку для функции svgToImage():

svgToImage(svg2, function(img2) { 
    vms.width = img2.width; 
    vms.height = img2.height; 
    alert("completed 3"); 
    ctx2.drawImage(img2, 0, 0); 
     alert("completed 4"); 
}); // <-- here 

Есть также некоторые другие вопросы:

Просто повторное использование холста элемента:

var canvCrtrWrp = $('<canvas />',{ id : 'mycanvs'+randn }) 

... 
var vms = canvCrtrWrp[0]; // index 0 is the actual canvas element 

Вы также можете использовать ширину из созданного изображения на холсте:

svgToImage(svg2, function(img2) { 
    vms.width = img2.width; 
    vms.height = img2.height; 
    ... 

Не забывайте использовать onload обработчик для изображения (он был удален из исходного кода) не .Ел элемент изображения передаются обратно без каких-либо данных фактического изображения (нужно некоторое время для загрузки, декодирование и т.д.):

function svgToImage(svg2, callback) { 
    var nurl = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg2), 
     img2 = new Image; 

    img2.onload = function() { 
     callback(this); 
    } 
    ... 

т.д.

Обновлено fiddle.