HTML5 Game - Using the clearRect() function

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Clear

Description

Using the clearRect() function

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas {/*from  w ww  .j  a va  2 s  .c o m*/
  border:1px solid #03F; 
  background:#CFC; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="640" height="480"></canvas> 
<script> 
  let context = document.getElementById('canvas').getContext('2d'); 
   let theCanvas = document.getElementById('canvas')

    let yOffset=0; 

    function drawScreen(){ 

        context.clearRect(0,0,theCanvas.width,theCanvas.height); 

       let currentPath=context.beginPath(); 
       context.strokeStyle = "red"; //need list of available colors 
       context.lineWidth=5; 
       context.moveTo(0, 0+yOffset); 
       context.lineTo(50, 0+yOffset); 
       context.lineTo(50,50+yOffset); 
       context.stroke(); 
       context.closePath(); 
              yOffset+=1; 

    } 

    function gameLoop() { 
       window.setTimeout(gameLoop, 20); 
       drawScreen() 

    } 

    gameLoop(); 
</script> 



</body> 
</html>

Related Topic