Canvas disappearing on event listener

Question

I am trying to create a rect that moves on keypress for a pong game and when I press the key the left rect disappears.. Any ideas how to fix the problem? It is really important.. The code is written in vanilla javascript so please don't write jQuery..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pong</title>
    <script type="text/javascript">
        var x = 100;
        var y = 100;
        var xmoveFirst = 720;
        var ymoveFirst = 0;
        var xmoveSecond = 30  ;
        var ymoveSecond = 0;
        function canvas() {
            var can = document.getElementById('theCanvas');
            can.style.backgroundColor = "black";
            var ctx = can.getContext('2d');
            
            //first player
            ctx.fillStyle="white";
            ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
            
            //second player
            ctx.fillStyle = 'white';
            ctx.fillRect(xmoveSecond,ymoveSecond,5,75);
            
            //first player move
            function moveFirst(eFirst) {
                ctx.clearRect(0,0,750,750); //clear rects
                if (eFirst.keyCode == 40) {
                    ymoveFirst+=25;
                    console.log("first,"+ymoveFirst);
                }
                
                else if (eFirst.keyCode == 38) {
                    ymoveFirst-=25;
                    console.log("first,"+ymoveFirst);
                }
                ctx.fillStyle="white";
                ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
                ctx.fillRect(xmoveSecond,ymoveSecond,5,75);

            }
            var first = document.onkeydown = moveFirst;
            
          //second player move
            
            function moveSecond(eSecond) {
                ctx.clearRect(0,0,750,750);
                if (eSecond.keyCode == 83) {
                    ymoveSecond+=25;
                    console.log("second,"+ymoveSecond);
                }
                
                else if (eSecond.keyCode == 87) {
                    ymoveSecond-=25;  
                }
                
                ctx.fillStyle="white";
                ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
                ctx.fillRect(xmoveSecond,ymoveSecond,5,75);
                console.log("second,"+ymoveSecond)
            }
            
            var second = document.onkeydown = moveSecond;
        }
      
            
        83,87
    </script>
</head>
<body onload="canvas()">
    <canvas id="theCanvas" width="750" height="750"></canvas>
</body>
</html>

the keycode for left button is 37, anyway the rect disappers right after executing `can.width=can.width` inside `moveRight()`(checked with chrome debugger), I wonder why :O — niceman, Jul 02 '16 at 18:21
there is another method instead can.witdh=can.width for the clear? — Nimrod Naim, Jul 02 '16 at 18:29
if you mean to clear the canvas then [sure](http://stackoverflow.com/a/2142549/2397162) — niceman, Jul 02 '16 at 18:31
in clear i mean that the canvas will move but remain the same height — Nimrod Naim, Jul 02 '16 at 18:32
anyway, what I meant is : `can.width=can.width` is like `x=x`(where x is already defined), it should be a useless statement that does nothing but it makes the rect disappear !!! — niceman, Jul 02 '16 at 18:32

asemahle · Accepted Answer · 2016-07-02T19:30:22.657

This line: can.width=can.width; resets the canvas width.

When you change the canvas size (width or height), you clear the canvas (making everything black). After this line, you are only redrawing the rightmost paddle, so the left one remains missing.

You'll need to redraw the leftmost paddle as well if you want it to come back. Here is the modified moveRight() function:

function moveRight(eFirst) {
  if (eFirst.keyCode==40) {
    ymoveFirst+=25;
    console.log(ymoveFirst);
  }

  else if (eFirst.keyCode==38) {
    ymoveFirst-=25;
    console.log(ymoveFirst);
  }
  can.width=can.width;
  ctx.fillStyle="white";

  // Redraw BOTH paddles
  ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
  ctx.fillRect(xmoveSecond,ymoveSecond,5,75);
}

Also, replace

document.onkeydown = moveFirst; and document.onkeydown = moveSecond;

with

document.addEventListener("keydown", moveFirst);, and document.addEventListener("keydown", moveSecond);

Currently, you are overwritting the first listener with document.onkeydown = moveSecond;. By using addEventListener, you don't overwrite the ones that already exist.

i have another question.. now,only the second function works.. I edited the main question — Nimrod Naim, Jul 02 '16 at 19:17
I have answered your second question. In the future you should open a new question if you have more. — asemahle, Jul 02 '16 at 19:31

Canvas disappearing on event listener

1 Answers1