How To Remove Canvas Image On A Onmouseout?

I am trying to change the image in canvas ID 'A' with mouseout on canvas ID 'e' I have been able to get the mousover to work and add a image to canvas 'A', but not remove it. &

Solution 1:

Removing something from a canvas is impossible in such that when you draw something, only pixels are saved. There is therefore no concept of an image anymore after drawing.

What you can do, however, is clearing the full canvas before drawing another image. This code might be appropriate for largeImage. The same goes for smallImage. I also advise you to use image.onload to make sure the image is only drawn when it is fully loaded.

functionlargeImage(src){
    var canvas = document.getElementById("A");
    var context = canvas.getContext("2d");
    var canvas2 = document.getElementById("l");
    var context2 = canvas.getContext("2d");
    if (context == null) return;
    var img = newImage();
    img.src = src;
    context2.clearRect(0, 0, 166, 276);
    img.onload = function() {
        context.drawImage(img, 0, 0, 300, 400);
    }
}