JS Multitouch not working

I am a german guy, 15 years old, and I have a problem. The problem is called multitouch in JS:

The method setparameters() will be called when the game starts and the methods update() and draw() will be called 60 times in a second.

When i put my finger down on the left side and i move it, a kind of circle pad will appear on the position i placed my finger. That works fine. BUT when i touch the right side while i am moving my left finger, the circle pad will disappear for a frame and appear again on an other position after i moved my left finger.

Hope you can help me!

Here the url to the website: http::/http://ift.tt/292Jc4I

And here the code:

    var canvas;
    var ctx;

    var touchdownX = 0;
    var touchdownY = 0;
    var touchX = 0;
    var touchY = 0;

    var difX = 0;
    var difY = 0;

    var touchRight = false;
    var touchLeft = false;
    var halfScreenWith = window.innerWidth/2;

    var playerX = 200;
    var playerY = 200;

    //Die Parameter werden nach dem Laden gesetzt und steuerungslistener hinzugefügt
    function setupParams(){
      canvas = document.getElementById('canvas');
      ctx = canvas.getContext("2d");

      canvas.addEventListener('touchstart', function(e) {
        for (var i = 0; i < event.touches.length; i++) {
          var touch = event.touches[i];
          var tempTouchX = touch.clientX;
          if(tempTouchX>halfScreenWith){
            //Rechtsclick
            touchRight=true;
          }else{
            touchLeft = true;
            touchdownX = touch.clientX;
            touchdownY = touch.clientY;
            touchX = touch.clientX;
            touchY = touch.clientY;
          }
        }

      }, false);

      canvas.addEventListener('touchmove', function(e) {
        for (var i = 0; i < event.touches.length; i++) {
          var touch = event.touches[i];
          if(touch.clientX<halfScreenWith){
            var tempTouchX = touch.clientX;
            if(tempTouchX<halfScreenWith){
              touchLeft = true;
              touchX = touch.clientX;
              touchY = touch.clientY;
            }
          }

        }

      }, false);

      canvas.addEventListener('touchend', function(e) {
        touchLeft = false;
      }, false);
    }

    //Die Werte neu berechenen
    function updateGame(){
      if(touchRight){

        //touchRight = false;
      }

      if(touchLeft){
        difX = touchX - touchdownX;
        difY = touchY - touchdownY;

        if(difX>0 && difX>10){
          difX = 1.5;
        }else if(difX<-10){
          difX = -1.5;
        }else{
          difX = 0;
        }

        if(difY>0 && difY>10){
          difY = 1.5;
        }else if(difY<-10){
          difY = -1.5;
        }else{
          difY = 0;
        }

      }else{
        difX = 0;
        difY = 0;
      }
    }

    //Die Grfaiken neu anzeigen
    function drawGame(){
      playerX = playerX + difX;
      playerY = playerY + difY;

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.beginPath();
      ctx.rect(playerX,playerY,32,32);
      ctx.stroke();

      if(touchLeft){
        ctx.beginPath();
        ctx.arc(touchdownX-16,touchdownY-16,32,0,2*Math.PI);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(touchX-12,touchY-12,24,0,2*Math.PI);
        ctx.stroke();
      }


      if(touchRight){
        ctx.beginPath();
        ctx.rect(200,200,32,32);
        ctx.stroke();
        touchRight = false;
      }
    }