TryIt Editor v2.0 - Javascript Clear the Canvas

Source Code: (back to article)

<!DOCTYPE HTML>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #button {
        position: absolute;
        top: 5px;
        left: 10px;
      }
      #button input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>
  <body data-rsssl=1>
    <canvas id="myCanvas" width="500" height="200"></canvas>
    <div id="button">
      <input type="button" id="clear" value="Clear">
    </div>
    <script>
      let canvas = document.getElementById('myCanvas');
      let context = canvas.getContext('2d');
      // begin custom shape
      context.beginPath();
      context.moveTo(180, 90);
      context.bezierCurveTo(120, 90, 120, 160, 240, 160);
      context.bezierCurveTo(260, 190, 300, 170, 350, 150);
      context.bezierCurveTo(410, 140, 440, 130, 380, 110);
      context.bezierCurveTo(440, 50, 350, 40, 350, 50);
      context.bezierCurveTo(310, 10, 270, 30, 240, 40);
      context.bezierCurveTo(310, 10, 130, 15, 180, 90);
      // complete custom shape
      context.closePath();
      context.lineWidth = 7;
      context.strokeStyle = 'green';
      context.stroke();
      // bind event handler to clear button
      document.getElementById('clear').addEventListener('click', function() {
          context.clearRect(0, 0, canvas.width, canvas.height);
        }, false);
    </script>
  </body>
</html>