Question

I have found a script that adds mouse trail on Opera’s mouse gesture. Very nice done but with one problem. It detects when the mouse button is down and starts to draw a line BUT it doesn’t detect when the mouse button is released. The trail is displayed for an amount of time (1 second). Can the script be updated so that the trail is present on screen as long as the button mouse is pressed ?

The script was found in http://extendopera.org/userjs/content/gesture-tails

var GestureTrail={
//options:
  opacity:1,
  color:'#f27',


        canvas:null,
        _2d:null,
        start:null,
        cur:null,
        isdown:false,
        init:function(){

        /* create a transparent canvas element the size of
           the full window and insert it into the document */
          var canvas=document.createElement('canvas');
          canvas.height=window.innerHeight;
          canvas.width=window.innerWidth;
          document.body.appendChild(canvas);
          canvas.style="position:fixed;top:0;display:none;z-index:-999;left:0;opacity:"+this.opacity+";";
          this.canvas=canvas;

        /* grab the 2d methods for the canvas element */
          this._2d=this.canvas.getContext('2d');

    window.addEventListener("mousemove",function(e){GestureTrail.draw(e);},0);
    window.addEventListener("mouseup",function(e){GestureTrail.release();},0);
        },
        click:function(e){
          if(e.button!=2){return true;} // if not rightclick
          this.start={x:e.clientX,y:e.clientY}; // set the line start-point to the mouse position
                this._2d.strokeStyle=this.color;
          this.isdown=true;
          setTimeout(function(){GestureTrail.release();},1000); // thanks to Somh for thinking of this
          },
        draw:function(e){
          if(!this.isdown){return;} // if the mouse isn't down
          this.canvas.style.zIndex="999";    // bring the canvas element to the top 
          this.canvas.style.display="block"; /* (must be done on move - if done on mousedown
                                                it obscures text selection (HotClick) context menu) */
                this.cur={x:e.clientX,y:e.clientY}; // set point to begin drawing from
    this._2d.beginPath();
                this._2d.moveTo(this.start.x,this.start.y);
                this._2d.lineTo(this.cur.x,this.cur.y);
                this._2d.stroke();
    this.start=this.cur; /* sets the startpoint for the next mousemove to the
                             current point, otherwise the line constantly restarts
                             from the first point and you get a kind of fan-like pattern */
        },
        release:function(){
          this._2d.clearRect(0,0,window.innerWidth,window.innerHeight); // wipe the trails from the entire window
          this.isdown=false;
          this.canvas.style.zIndex="-999"; // send the canvas element back down below the page
          }
};

window.opera.addEventListener("BeforeEvent.mousedown",function(e){GestureTrail.click(e.event);},0);
window.addEventListener('DOMContentLoaded',function(){GestureTrail.init();},0);

Answer 1

remove:

  setTimeout(function(){GestureTrail.release();},1000); // thanks to Somh for thinking of this

thats at the end of the click function. that should be all

but that is a site for real programming questions, not for customers to look for programms to do their work without payment