Sign in to follow this  
James432213

ctx.clearRect() not working with Image.

Recommended Posts

Hi, why does the canvas not clear via the updateCanvas() function. I believe it has to do something, "window.onload = canvas", but without it I am unable to draw the Player Image as it doesn't work with out window.onload. Thank you.
 

<!DOCTYPE html>

<html>
<head>
    <title>Mr K - Interactive Online Game</title>
    <script>
        window.onload = canvas;
        var Player;
        var xPos=100;
        var yPos=375;
        function canvas(){
        var canvas = document.getElementById("myCanvas");
        canvas.addEventListener('keydown', doKeyDown, true);
        ctx = canvas.getContext("2d");
        
        Player = document.getElementById("MrK");
        drawPlayer(xPos,yPos);
        } //drawImage(imgSrc, sx, sy, sw, sh,dx,dy, dw, dh);
        
        function doKeyDown(e){
            switch(event.keyCode){
                case 37: {//Left arrow
                    updateCanvas();
                    xPos=xPos-10;
                    drawPlayer(xPos,yPos);
                    break;
                } //Up arrow
            }
        }
        
        function updateCanvas(){
            alert('cleared');
            ctx.clearRect(0,0, canvas.width, canvas.height);
        }
        
        function drawPlayer(x,y){
            ctx.drawImage(Player,x,y,100,100);
        }

        
    </script>
</head>
<body>
    <section style="border-style: solid; border-width: 2px; width: 1000px; height:500px;">
    <canvas id="myCanvas" width="1000" height="500" tabindex="0" >Canvas tag not supported
    </canvas>
    <img id="MrK" src="MrKPlayer - Copy.png" style="display:none;"/>
    </section>
    <p>To begin, click on game.</p>
    


</body>
</html>

 

Share this post


Link to post
Share on other sites

@James432213 hi, many issues here, all solvable.

1) The function named "canvas" rename this and avoid some confusion, call it "init" or similar

2) doKeyDown function has parameter "e" but references "event" in the switch - be consistent.

3) the functions doKeyDown, updateCanvas, drawPlayer are scoped "above" the "init" function, so they can have no easy reference to the "canvas" variable defined within "init".  Notice also the name collision of "canvas" if we ignore step 1.  Easy fix is to move these function declarations inside the "init" function.

4) There's nothing wrong with ctx.clearRect ;)

Some basics in how to debug your code will be beneficial, in particular the developer console (F12) is great, and using "console.log" can send helpful messages there from your code.  Use that as a start towards watching the flow of your code when it runs, and where things are not actually working as might be expected on a first draft of code.  This will lead to more advanced debugging techniques and more elaborate (and working) code.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.