Как менять изображение в canvas для генерации изображения

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
 
var img1 = loadImage('https://psv4.userapi.com/c816320/u117638506/docs/0d1af56ccd67/04-trial.jpg?extra=vTS_RrZgNls-cCx1gnrhNcFtPnQ-1NTK6ndz-uFVTA5nV6rt1ePbrvvd0BSxZalstjppV5G8-sk-xnEbe59meJM2bnPajjNtL-4KevzF9Mzfpm0KwNvkpHySEw', main); 
var img2 = loadImage('https://psv4.userapi.com/c816335/u117638506/docs/7e56c1d60fc3/Group_3_Copy.png?extra=K4EpCmsXfSvyiMx58w9wGPB7u5ndv7FrdChiOBQqU0r2SmlBIJqtSinHixvVv7cvz9xBqN-1-Eo3DD6DyEOJqFVT8Ej8FI-FEye3QL2H0Nl2ZztfJjS-F3lCvQ', main); 
 
var imagesLoaded = 0; 
function main() { 
    imagesLoaded += 1; 
 
    if (imagesLoaded == 2) { 
    	// composite now 
    	ctx.drawImage(img1, 293, 56, 214, 285); 
 
    	ctx.globalAlpha = 1.0; 
    	ctx.drawImage(img2, 0, 0, 800, 400); 
	} 
} 
 
function loadImage(src, onload) { 
    // http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called 
    var img = new Image(); 
     
    img.onload = onload; 
    img.src = src; 
 
    return img; 
 
} 
 
 
 
 

<canvas width="800" height="400" id="canvas"></canvas>