Image isn't drawn after canvas is cleared (html5 canvas)

Question

I am trying to make a variant of the boomshine game in javascript and everything works when I draw a circular shape with the arc function. However when i try to replace the arc function with the drawImage function to use a coin image instead of a circular shape I start having problems when I clear the canvas to delete the previous drawn circular shapes. If I don't clear the canvas before rendering the images, the images are drawn on the canvas except the old images are still on the canvas. But when i do clear the canvas before rendering the images again, nothing is drawn on the canvas.

I have included screenshots, the links are below.

This is how I clear the canvas:

var ctx = game.context;
ctx.fillStyle = "darkgray";
ctx.fillRect(0, 0, game.canvas.width, game.canvas.height);

This is how i draw the image:

function drawImageBall(x,y,radius,startAngle,color)
{
var img = document.createElement('img');
img.src = 'img/coin-icon.png';

var tmpCtx= game.context;
var ax = x-radius;
var ay = y-radius;

img.onload = function() {
    tmpCtx.save();
    tmpCtx.beginPath();
    tmpCtx.arc(x, y, radius, 0, Math.PI * 2, true);
    tmpCtx.closePath();
    tmpCtx.clip();

    tmpCtx.drawImage(img, ax, ay, img.width, img.height);

    tmpCtx.beginPath();
    tmpCtx.arc(0, 0, radius, 0, Math.PI * 2, true);
    tmpCtx.clip();
    tmpCtx.closePath();
    tmpCtx.restore();
};
}

Clearing canvas (screenshot) Without clearing canvas (screenshot)

Answer 1

Keep in mind that downloading the img will take some time.

During that downloading time, Javascript does not stop(!). Instead JS will continue executing any following code. This is causing your unexpected problems.

So download the img just once at the start of your app . That way your drawImage will be done in the order that you expect because there will be no delay while your image is downloading.

Answer 2

Using your code, I maked some changes, I removed the tmpTcx.clip(), look the fidlle. Tip: For performace questions you don't need load the image every time that you want write the canvas.

Poor Example: https://jsfiddle.net/wf4z0d2h/1/

function clearCanvas(){
        var ctx = game.context;
        ctx.fillStyle = "darkgray";
        ctx.fillRect(0, 0, game.canvas.width, game.canvas.height);
    }

    function drawImageBall(x,y,radius,startAngle,color)
    {
        if(x == undefined){x = 100;}
        if(y == undefined){y = 100;}
        if(radius == undefined){radius = 40;}

        //var img = document.createElement('img');
        //img.src = 'img/coin-icon.png';
        //img.src = "http://ps2.lansa.com/images/icons/normal/256/coin_256.png";

        var tmpCtx= game.context;
        var ax = x-radius;
        var ay = y-radius;


        //img.onload = function() {
            tmpCtx.save();
            tmpCtx.beginPath();
            tmpCtx.arc(x, y, radius, 0, Math.PI * 2, true);
            tmpCtx.stroke(); // Draw it
            tmpCtx.closePath();
            //tmpCtx.clip();


            tmpCtx.drawImage(img, ax, ay, img.width, img.height);

            //tmpCtx.beginPath();
            //tmpCtx.arc(0, 0, radius, 0, Math.PI * 2, true);
            ////tmpCtx.clip();
            //tmpCtx.stroke(); // Draw it
            //tmpCtx.closePath();
            //tmpCtx.restore();
        //};
    }
    var img = document.createElement('img');
        //img.src = 'img/coin-icon.png';
        img.src = "http://ps2.lansa.com/images/icons/normal/256/coin_256.png";

    //drawImageBall();
    img.onload = function(){
    x = 0;
    y = 0;
    setInterval(function(){
        x = x+10;
        y = y+10;
        clearCanvas();
        drawImageBall(x,y);

    },300);
    }