Appending a div containing canvas is not working

Question

I am making use of canvg to convert svg present in div into canvas(upto this it's working fine) and then copying the innerHTML of div to another div, but it's not working. Canvas is coming but nothing will be present in that canvas. Thanks in advance

<div id="k">
<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg> 
</div>
<div id="kk">
<p>Watch me</p>
</div>

var svgTag = document.querySelectorAll('#k svg');    
    svgTag = svgTag[0];
    var c = document.createElement('canvas');
    c.width = svgTag.clientWidth;
    c.height = svgTag.clientHeight;
    svgTag.parentNode.insertBefore(c, svgTag);
    svgTag.parentNode.removeChild(svgTag);
    var div = document.createElement('div');
    div.appendChild(svgTag);
    canvg(c, div.innerHTML);

    setTimeout(function(){
        var data = $("#k").html();
      $("#kk").append($(''+data+''));
    },5000);

JSFiddle

yes, canvas is a special element. It can't just copied with javascript, it must be "redrawn" — Taufik Nur Rahmanda, Oct 04 '17 at 07:27

score 1 · Answer 1 · answered Oct 04 '17 at 08:24

The content of a canvas element is held as binary data, much like the content of an image element. Canvas elements do not have an innerHTML text property that can be used to recreate the canvas.

The following example shows a method of cloning a canvas element using standard canvas 2D methods:

function canvasClone(c1) {
    var c2 = document.createElement('canvas');
    c2.width=c1.width;
    c2.height=c1.height;
    c2.getContext("2d").drawImage(c1, 0,0);
    return c2;
}

You can demonstrate it by including the function in the fiddle and changing the timeout processing to:

setTimeout(function(){
  kk.appendChild(canvasClone(c));
},5000);

Feel free to rewrite the timeout code in JQuery if you prefer.

Appending a div containing canvas is not working

1 Answers1

Linked