Change Canvas Image With Javascript

the desired behavior is when the document loads, canvas draws image 0. when the invisible div is clicked, canvas draws image 1, on mouseup or mouseout, it reverts back to image 0.

Solution 1:

your code is missing an ending block

function imgChange(imagePath) {
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            var img=new Image();
            img.onload = function(){
                  ctx.drawImage(img,0,0);
            };
            img.src=imagePath;
}

The last '}' is missing

Solution 2:

JavaScript looks good. But you can't click on an invisible div. Make the div visible and try.

Be aware of same origin policy too. Image path should be in your domain. If you are running in localhost you might need to have a local HTTP server.