HTML5 Game - Click to erase canvas

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

Description

Click to erase canvas

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
     <title>Rectangles</title>

      <style> 
         body {//w  ww  .  ja  v  a  2 s .  c o m
            background: #dddddd;
         }

         #canvas {
            background: #eeeeee;
            border: thin solid #aaaaaa;
         }
      </style>
   </head>

  <body>
    <canvas id='canvas' width='600' height='400'>
      Canvas not supported
    </canvas>

    <script>

let canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

context.lineWidth = 30;

context.font = '24px Helvetica';
context.fillText('Click anywhere to erase', 175, 40);

context.strokeRect(75, 100, 200, 200);
context.fillRect(325, 100, 200, 200);

context.canvas.onmousedown = function (e) {
   context.clearRect(0, 0, canvas.width, canvas.height);
};
      
    </script>
  </body>
</html>

Related Topic