title: HTML5 video to canvas playing very slow
body: <p>I've built this HTML5 video player that I am loading into a canvas to manipulate and back onto a canvas to display it. The video starts out quite slow and the frame rate only gets worse each time it is played. All I am currently manipulating in the video now is the color value when the video is paused, but will eventually be using real time manipulation throughout videos that will be posted in the future.</p>
  
  <p>I used the below tutorial to learn this trick <a href="https://www.youtube.com/watch?v=zjQzP3mOXdc" rel="nofollow">https://www.youtube.com/watch?v=zjQzP3mOXdc</a></p>
  
  <p>Here is the relevant code, but there may possibly be interference coming from elsewhere so feel free to check the source code at the link at the bottom</p>
  
  <pre><code>var v = document.getElementById('video');
  var color = "#DA7AC1";
  var processes={
    timerCallback:function() {
      if (this.v2.paused || this.v2.ended) {
        return;
      }
          this.ctxIn.drawImage(this.v2,0,0,this.width,this.height);
          this.pixelScan();
          var self=this;
          setTimeout(function() {
            self.timerCallback();
          }, 0);
    },
    doLoad:function(){
      this.v2=document.getElementById("video");
      this.cIn=document.getElementById("cIn");
      this.ctxIn=this.cIn.getContext("2d");
      this.cOut=document.getElementById("cOut");
      this.ctxOut=this.cOut.getContext("2d");
      var self=this;
      this.v2.addEventListener("playing", function() {
        self.width=self.v2.videoWidth;
        self.height=self.v2.videoHeight;
        cIn.width=self.v2.videoWidth;
        cIn.height=self.v2.videoHeight;
        cOut.width=self.v2.videoWidth;
        cOut.height=self.v2.videoHeight;
        self.timerCallback();
      }, false);
    },
    pixelScan: function() {
      var frame = this.ctxIn.getImageData(0,0,this.width,this.height);
      for(var i=0; i&lt;frame.data.length;i+=4) {
        var grayscale=frame.data[i]*.3+frame.data[i+1]*.59+frame.data[i+2]*.11;
        frame.data[i]=grayscale;
        frame.data[i+1]=grayscale;
        frame.data[i+2]=grayscale;
      }
      this.ctxOut.putImageData(frame,0,0);
      return;
    }
  }
  </code></pre>
  
  <p><a href="http://coreytegeler.com/ethan/" rel="nofollow">http://coreytegeler.com/ethan/</a></p>
  
  <p>Any and all help would be greatly appreciated! Thanks!</p>