HTML5 Game - Clear canvas by setting width and height value

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

Description

Clear canvas by setting width and height value

Demo

ResultView the demo in separate window 

<!DOCTYPE html>

<html>
  <head>
    <title>Learning the basics of canvas</title>
    <meta charset="utf-8">
    //from   w w w  .ja v  a2 s .  c o  m
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    
    <script type="text/javascript">
      $(document).ready(function() {  
        let canvas = $("#myCanvas");
        let context = canvas.get(0).getContext("2d");
        
        context.fillStyle = "rgb(255, 0, 0)";
        
        context.fillRect(40, 40, 100, 100);
        
        context.beginPath();
        context.arc(230, 90, 50, 0, Math.PI*2, false);
        context.closePath();
        context.fill();
        
      //  context.clearRect(230, 90, 50, 50);
        
        canvas.attr("width", canvas.width());
        canvas.attr("height", canvas.height());
        
        context.fillRect(4, 4, 100, 100);
      });
    </script>
  </head>
  
  <body>
    <canvas id="myCanvas" width="500" height="500">
      <!-- Insert fallback content here -->
    </canvas>
  </body>
</html>

Related Topic