Loading Multi images of the same object into a canvas tag not working

I am trying to create a mini game where you have to guess where the ball is and everybody gets a dynamic amount of tries. When they click on the canvas the ball appears where clicked to indicate where the person has chosen to guess click. When they click again and again and so on to use all their tries the balls are sapose to stay on the canvas but instead each click replaces the previous placed ball. Does anybody have any ideas as too why?

NOTE: I pasted a lot of code here that might not have been necessary but last time i asked the question here people didnt seem to grasp exactly what i wanted so i hope the extra info helps. pleeease help :/

$(document).ready(function(){                                        
    var canvas = document.getElementById('play_canvas');
    var context = canvas.getContext('2d');
    var offsetX=canvas.offsetLeft;
    var offsetY=canvas.offsetTop;
    var startX;
    var startY;
    var prize_id=null;                                        
    var imageObj = new Image();
    var imageObjBall = new Image();
    imageObj.src = 'http://ift.tt/2qSglMB';
    imageObjBall.src='/images/golfball_small.png';
    imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, 700, 618);
    };
    var entry=null;

    // CANVAS EVENTS VAR
        var isDown=false,
            isDrawing=false,
            coordinates=[];

    // CLICK EVENTS
        $('#draw').on('click',function(){
            $(this).toggleClass('active');
            isDrawing=!isDrawing;
        });
        $('#undo').on('click',function(){
            coordinates.pop();
            drawAll();
        });
        $('#clear').on('click',function(){
            context.clearRect(0, 0, 700, 618);
            context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, 700, 618);
            coordinates=[];
            entry=null;
        });


        $('.play_prizes_block').on('click', '.prize_play_item' ,function(){
            $('.prize_play_item.selected').removeClass('selected');
            $(this).addClass('selected');
            prize_id=$(this).data('item-id');
        });

    // EVENT FUNCTIONS
        function drawAll(){
            context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height,0, 0, 700, 618);

            if(coordinates.length > 0){
                coordinates.map((coord, key) =>{
                    context.beginPath();
                    context.moveTo(coord.startX, coord.startY);
                    context.lineTo(coord.toX,coord.toY);
                    context.strokeStyle="rgb(226, 104, 36)";
                    context.lineWidth=2;
                    context.stroke();                   
                });
            }

            if(entry){
                context.drawImage(imageObjBall, entry.posX-8, entry.posY-8, 16, 16);


            }
        }

        function drawLine(toX,toY,context){
            drawAll();
            context.beginPath();
            context.moveTo(startX, startY);
            context.lineTo(toX,toY);
            context.strokeStyle="rgb(226, 104, 36)";
            context.lineWidth=2;
            context.stroke();           
        }

        function handleMouseDown(e){
            if(isDrawing){
                e.preventDefault();
                var pos = getMousePos(canvas, e);
                mouseX = pos.x;
                mouseY = pos.y;                                                    

                // save drag-startXY, 
                // move temp canvas over main canvas,
                // set dragging flag
                startX=mouseX;
                startY=mouseY;
                isDown=true;
            }
        }

        function handleMouseUp(e){
            e.preventDefault();
            if(!isDown){return;}
            // clear dragging flag
            // move temp canvas offscreen
            // draw the user's line on the main canvas
            isDown=false;
            var pos = getMousePos(canvas, e);
            mouseX = pos.x;
            mouseY = pos.y;
            drawLine(mouseX,mouseY,context);
            coordinates.push({startX:startX,startY:startY,toX:mouseX,toY:mouseY});      
        }

        function handleMouseMove(e){
            e.preventDefault();        
            if(!isDown){return;}
            var pos = getMousePos(canvas, e);
            mouseX = pos.x;
            mouseY = pos.y;
            // clear the temp canvas
            // on temp canvas draw a line from drag-start to mouseXY
            context.clearRect(0, 0, 700, 618);
            drawLine(mouseX,mouseY,context);
        }

        function handleClick(e){
            if(!isDrawing && prize_id != null){
                var pos = getMousePos(canvas, e);
                mouseX = pos.x;
                mouseY = pos.y;

                $x_id=`#cor_x_${prize_id}`;
                $y_id=`#cor_y_${prize_id}`;

                context.clearRect(0, 0, 700, 618);

                context.drawImage(imageObjBall, mouseX-8, mouseY-8, 16, 16);

                entry={posX:mouseX,posY:mouseY};

                $($x_id).text(mouseX);
                $($y_id).text(mouseY);        
                drawAll();
            }
        }

        function getMousePos(canvas, evt) {
            var rect = canvas.getBoundingClientRect();
            return {
              x: Math.round(evt.clientX - rect.left),
              y: Math.round(evt.clientY - rect.top)
            };
        }                                      

    // EVENT LISTENERS
        canvas.addEventListener("click", function(e){handleClick(e);});
        canvas.addEventListener("mousedown", function(e){handleMouseDown(e);});
        canvas.addEventListener("mousemove", function(e){handleMouseMove(e);});
        canvas.addEventListener("mouseup", function(e){handleMouseUp(e);});
        canvas.addEventListener("mouseout", function(e){handleMouseUp(e);});

}) 

via Chebli Mohamed