title: Flickering occurs when mouse moves over the object- Javascript
body: <p>I am drawing some objects (eg Rectangle) on a canvas. It has a background image as well.</p>
  
  <p>But When I am drawing the rectangle using the mouse events, the screen flickers a lot.
  How can I stop the flickering on mouse move/mouse down as I am changing the positrion of object so its repainting the canvas again and again.
  Can we render it for sometime or any other solution to it ?</p>
  
  <p>I have heard there is some function as "Redraw = false"in java and C# but my code is in JavaScript.</p>
  
  <p><a href="http://jsfiddle.net/G6tLn/7/" rel="nofollow">http://jsfiddle.net/G6tLn/7/</a>`function myMove(e) {
          if (isDrag) {
              getMouse(e);</p>
  
  <pre><code>        mySel.x = mx - offsetx;
          mySel.y = my - offsety;
  
          // something is changing position so we better invalidate the canvas!
          invalidate();
      } else if (isResizeDrag) {
          // time ro resize!
          var oldx = mySel.x;
          var oldy = mySel.y;
  
          // 0  1  2
          // 3     4
          // 5  6  7
          switch (expectResize) {
              case 0:
                  mySel.x = mx;
                  mySel.y = my;
                  mySel.w += oldx - mx;
                  mySel.h += oldy - my;
                  break;
              case 1:
                  mySel.y = my;
                  mySel.h += oldy - my;
                  break;
              case 2:
                  mySel.y = my;
                  mySel.w = mx - oldx;
                  mySel.h += oldy - my;
                  break;
              case 3:
                  mySel.x = mx;
                  mySel.w += oldx - mx;
                  break;
              case 4:
                  mySel.w = mx - oldx;
                  break;
              case 5:
                  mySel.x = mx;
                  mySel.w += oldx - mx;
                  mySel.h = my - oldy;
                  break;
              case 6:
                  mySel.h = my - oldy;
                  break;
              case 7:
                  mySel.w = mx - oldx;
                  mySel.h = my - oldy;
                  break;
          }
  
          invalidate();
      }
  
      getMouse(e);
      // if there's a selection see if we grabbed one of the selection handles
      if (mySel !== null &amp;&amp; !isResizeDrag) {
          for (var i = 0; i &lt; 8; i++) {
              // 0  1  2
              // 3     4
              // 5  6  7
  
              var cur = selectionHandles[i];
  
              // we dont need to use the ghost context because
              // selection handles will always be rectangles
              if (mx &gt;= cur.x &amp;&amp; mx &lt;= cur.x + mySelBoxSize &amp;&amp;
                      my &gt;= cur.y &amp;&amp; my &lt;= cur.y + mySelBoxSize) {
                  // we found one!
                  expectResize = i;
                  invalidate();
  
                  switch (i) {
                      case 0:
                          this.style.cursor = 'nw-resize';
                          break;
                      case 1:
                          this.style.cursor = 'n-resize';
                          break;
                      case 2:
                          this.style.cursor = 'ne-resize';
                          break;
                      case 3:
                          this.style.cursor = 'w-resize';
                          break;
                      case 4:
                          this.style.cursor = 'e-resize';
                          break;
                      case 5:
                          this.style.cursor = 'sw-resize';
                          break;
                      case 6:
                          this.style.cursor = 's-resize';
                          break;
                      case 7:
                          this.style.cursor = 'se-resize';
                          break;
                  }
                  return;
              }
  
          }
          // not over a selection box, return to normal
          isResizeDrag = false;
          expectResize = -1;
          this.style.cursor = 'auto';
      }
  
  }
  </code></pre>
  
  <p>`</p>