Untitled

<html>
<head></head>
<body>
<canvas id="mijnCanvasje" width="500" height="300"
        style="border: 1px dotted black">
</canvas><br/>
<button onclick="doFrame()">klik maar</button>
<script>
   function drawDisc( x,y,r ) {
      theContext.beginPath();
      theContext.arc(x,y,r,0,Math.PI*2,false);
      theContext.closePath();
      theContext.fill();
   }

   function startDrawing(canvasId) {
      var canvasElement = document.getElementById(canvasId);
      var drawingContext = canvasElement.getContext("2d");
      return drawingContext;
   }

   var frameTeller = 0;
   function mijnFunctie() {
      console.log("frame-teller: ", frameTeller )
      frameTeller++
   }

   var deltaX = 5;
   var deltaY = 5;
   function doFrame() {

     if(x>470){
       deltaX=deltaX*-1;
       deltaX--;
       console.log("x groter dan 470");

     }
     if(x<30){
       deltaX=deltaX*-1;
       deltaX++;
       //console.log(deltaX);
       console.log("x kleiner dan 30");

     }

     if(y>270){
       deltaY=deltaY*-1;
       deltaY--;
       //console.log(deltaX);
       console.log("y groter dan 270");

     }
     if(y<30){
       deltaY=deltaY*-1;
       console.log("y kleiner dan 30");
       deltaY++;
       //console.log(deltaX);

     }

     x += deltaX;
     y += deltaY;
     theContext.clearRect(0,0,500,300); // wis het canvas
     drawDisc( x, y, 30 );

     //console.log(x)

     //alert("welkom in doFrame")
   }

   var theContext = startDrawing("mijnCanvasje")

   var x = 100;  // houdt de veranderende horizontale positie bij
   var y = 100;

   // doe de animatie naar rechts
   //while( x <= 400 ) {
      doFrame()

     setInterval( doFrame, 50 )
    //}
</script>
</body>
</html>