Hi i've been trying to build a template poster creator with html2canvas. When i try to render my canvas, its quilty decrease unexpectedly.

Here is the real canvas photo:

The rendering result is :

This is my capture function to render canvas:

function capture() {
            document.getElementById('fullpage').style.zoom = 3;
            $('#target').html2canvas({
                onrendered: function (canvas) {
            //Set hidden field's value to image data (base-64 string)
                    $('#img_val').val(canvas.toDataURL('image/png',1.0));
            console.log(canvas.toDataURL("image/png",1.0));
            //Submit the form manually
        document.getElementById("showimage").src = canvas.toDataURL('image/png',1.0);
        document.getElementById("image-holder").style.display = "block";
     //document.getElementById("myForm").submit();
                }
            });
     document.getElementById('fullpage').style.zoom = 1;
        }
     

This is the html code :

 <div class = "col-md-8">
        
           <div id = "image-holder" style = "display:none; position:fixed;
              top: 0;
              left: 0;z-index:1000;
              width:100%;
              height:100%;">
              <p onclick = "closeholder()" id = "closeholder" style="font-color:white;">X</p>
              <img id = "showimage" src = ""/>
           </div>

           <form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
              <input type="hidden" name="img_val" id="img_val" value="" />
           </form>
           
           <div id="target">
              <div id = "main_bg" style = "z-index: 0;position: absolute;height: 100%;width:100%;"></div>
           </div>
        </div>