JSFiddle - React, Tailwind, and code Playground

by John kuoppala

HTML

<canvas id='cnv'></canvas>

JavaScript

function changeImageInACanvas(dynamicSource){     
     var myid_signature = document.getElementById("cnv");    
     var myid_ctx_signature= myid_signature.getContext('2d');
     var myid_signature_image  = new Image();                                                
     myid_signature_image.src = dynamicSource;                    

     myid_ctx_signature.clearRect(0, 0, myid_signature.width, myid_signature.height);               

     if (myid_signature_image.complete){
         myid_ctx_signature.drawImage(myid_signature_image,0,0,  myid_signature_image.width,  myid_signature_image.height, 0, 0, myid_signature.width, myid_signature.height);                                                                                                
     }else{
         myid_signature_image.onload = function () {                            
             myid_ctx_signature.drawImage( myid_signature_image,0,0,  myid_signature_image.width,  myid_signature_image.height, 0, 0, myid_signature.width, myid_signature.height);                                                                                                   
         };                                              
     }
}


changeImageInACanvas('http://pattersonrivervet.com.au/sites/default/files/pictures/Puppy-10-icon.png');      

setTimeout(function () {
 changeImageInACanvas('https://38.media.tumblr.com/avatar_2be52b9ba912_128.png');  
},3000);