title: how to disable javascript function on a specific condition
body: <p>The situation is:
  I have a canvas and draw things on mousedown, and I have a generate button that generates new canvas' again you can draw things in same way.
  BUT the problem is when you click the previous canvas it started to draw the new one. It must not draw the new canvas the function has to stop there.
  Here is the drawing function:</p>
  
  <pre><code>canvas.onmousedown = function(e) {
  if (!painting) {
      painting = true;
  } else {
      painting = false;
  }
  
  lastX = e.pageX - this.offsetLeft;
  lastY = e.pageY - this.offsetTop;
  };
  
  canvas.onmousemove = function(e) {
  if (painting) {
      mouseX = e.pageX - this.offsetLeft;
      mouseY = e.pageY - this.offsetTop;
  
      // find all points between        
      var x1 = mouseX,
          x2 = lastX,
          y1 = mouseY,
          y2 = lastY;
  
  
      var steep = (Math.abs(y2 - y1) &gt; Math.abs(x2 - x1));
      if (steep){
          var x = x1;
          x1 = y1;
          y1 = x;
  
          var y = y2;
          y2 = x2;
          x2 = y;
      }
      if (x1 &gt; x2) {
          var x = x1;
          x1 = x2;
          x2 = x;
  
          var y = y1;
          y1 = y2;
          y2 = y;
      }
  
      var dx = x2 - x1,
          dy = Math.abs(y2 - y1),
          error = 0,
          de = dy / dx,
          yStep = -1,
          y = y1;
  
      if (y1 &lt; y2) {
          yStep = 1;
      }
  
      for (var x = x1; x &lt; x2; x++) {
          if (steep) {
              ctx.fillRect(y, x, 1, 1);
          } else {
              ctx.fillRect(x, y, 1, 1);
          }
  
          error += de;
          if (error &gt;= 0.5) {
              y += yStep;
              error -= 1.0;
          }
      }
  
  
  
      lastX = mouseX;
      lastY = mouseY;
  
  }
  };
  </code></pre>
  
  <p>Here is jsfiddle for the issue <a href="http://jsfiddle.net/regeme/eV6kW/3/" rel="nofollow">http://jsfiddle.net/regeme/eV6kW/3/</a>
  any help would be great.</p>