canvas drawImage 저장 질문입니다.

<script type="text/javascript">
var canvas = document.getElementById('signature-pad');

function resizeCanvas() {
 var ratio =  Math.max(window.devicePixelRatio || 1, 1);
 canvas.width = canvas.offsetWidth * ratio;
 canvas.height = canvas.offsetHeight * ratio;
 canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

document.getElementById('save-png').addEventListener('click', function () {
var data = signaturePad.toDataURL("image/png");


document.getElementById('clear').addEventListener('drawimage', function () {    
var ctx = canvas.getContext('2d');
var backgroundImage = new Image();
 ctx = canvas.getContext("2d");
 backgroundImage.src= 'https://t1.daumcdn.net/cfile/tistory/25679E435319402A2B';
 ctx.drawImage(backgroundImage, 0, 0);

});

var imgData = atob(data.split(',')[1]);
var len = imgData.length;
var buf = new ArrayBuffer(len);
var view = new Uint8Array(buf);
var blob, i;

for(i = 0; i < len; i++){
    view[i] = imgData.charCodeAt(i) & 0xff;
}

blob = new Blob([view], {type: 'image/png'});
console.log(blob);

var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.style = "display:none";
a.href = url;
a.download = "review_comment.png";

document.body.appendChild(a);
a.click();

setTimeout(function(){
    document.body.removeChild(a);
    URL.revokeObjectURL(url); //메모리 해제
}, 100);
});

</script>