title: Javascript Onclick Functions
body: <p>Writing a simple script to have two buttons. One button animates a "painting" feature where rectangles follow the cursor around the canvas. The other button would display a rectangle that follows the canvas but doesn't leave a trail like the other. I have the buttons linked to do different functions. Right now the follow button doesn't work, it does clear the canvas but it still allows you to paint. It seems that the paint function is still running after I hit the follow button. Any help is appreciated. </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Canvas&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input type="button" value="Paint" onclick="isPaint()"&gt;
  &lt;input type="button" value="Follow" onclick="isFollow()"&gt;
  &lt;canvas id="myCanvas" width="500" height="500"&gt;&lt;/canvas&gt;
  
  &lt;script&gt;
  
  function isPaint(){
  
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  
  //change draw color
  ctx.fillStyle = "#FF0000";
  
  
  ctx.clearRect(0,0,500,500);
  
  canvas.addEventListener("mousemove", function(event) {
      ctx.fillRect(event.x,event.y,10,10);    
  })
  }
  
  
  function isFollow(){
  
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  
  //change draw color
  ctx.fillStyle = "#FF0000";
  
  ctx.clearRect(0,0,500,500);
  
      }
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>