title: Touch event javascript
body: <p>I make a mobile game and want that the ball moves to the right when the user touch on the left side of the screen and if the user touch the screen on the right side the ball should move to the left. I found a code snippet and try to use it, but it dont works. Have anyone a tip for me to solve the problem?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>     window.onload = window.onresize = function() {
         var C = 1; // canvas width to viewport width ratio
         var W_TO_H = 2 / 1; // canvas width to canvas height ratio
         var el = document.getElementById("myCanvas");
  
  
         var viewportWidth = window.innerWidth;
         var viewportHeight = window.innerHeight;
  
         var canvasWidth = viewportWidth * C;
         var canvasHeight = canvasWidth / W_TO_H;
         el.style.position = "fixed";
         el.setAttribute("width", canvasWidth);
         el.setAttribute("height", canvasHeight);
         el.style.top = (viewportHeight - canvasHeight) / 2;
         el.style.left = (viewportWidth - canvasWidth) / 2;
         var x = canvasWidth / 100;
         var y = canvasHeight / 100;
  
         window.ctx = el.getContext("2d");
         ctx.clearRect(0, 0, canvasWidth, canvasHeight);
         // draw triangles
         ctx.beginPath();
         ctx.moveTo(x * 90, y * 50);
         ctx.lineTo(x * 99, y * 75);
         ctx.lineTo(x * 99, y * 25);
         ctx.closePath();
         ctx.stroke();
         ctx.beginPath();
         ctx.moveTo(x * 10, y * 50);
         ctx.lineTo(x * 1, y * 25);
         ctx.lineTo(x * 1, y * 75);
         ctx.closePath();
         ctx.stroke();
  
         ballx = canvasWidth / 100;
            
         // draw ball
         ctx.beginPath();
         ctx.fillStyle = "#FF4422"
         ctx.arc(ballx * 50, y * 50, x * 5, 0, 2 * Math.PI);
         ctx.fill();
  
         function init() {
           // Get a reference to our touch-sensitive element
           var touchzone = document.getElementById("gameArea");
           // Add an event handler for the touchstart event
           touchzone.addEventListener("touchstart", touchHandler, false);
         }
  
         function touchHandler(event) {
           // Get a reference to our coordinates div
           var can = document.getElementById("myCanvas");
           // Write the coordinates of the touch to the div
           if (event.touches[0].pageX &lt; x * 50) {
             ballx += x * 2;
           } else if (event.touches[0].pageY &gt; x * 50) {
             ballx -= x * 2;
           }
  
  
         }
       }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div="gameArea"&gt;
      &lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>