title: Canvas spritesheet and touch event is not working when I change position to absolute?
body: <p>I am developing simple game with HTML5 Canvas. I used sprite image for animate, when I change position to absolute its not working and also <code>touchevents</code> are not working on canvas object, if change position to absolute then <code>touchevents</code> works fine but sprite stuff not works.</p>
  <p>What might be the problem. Here is my JavaScript code.</p>
  <p>Here is my whole code</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery_v1.9.1.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
        var canvas = null;
        var img = null;
        var ctx = null;
        var antX = 0,
          antY = 0;
        var canvasX = 0,
          canvasY = 0;
        var imageReady = false;
        var img;
        function onload() {
          canvas = document.getElementById(&quot;gameCanvas&quot;);
          ctx = canvas.getContext(&quot;2d&quot;);
  
          img = document.getElementById(&quot;bg&quot;);
          img.onload = loaded();
          resize();
  
          canvas.addEventListener(&quot;touchstart&quot;, doTouchStart, false);
          document.addEventListener(&quot;click&quot;, function (e) {
            if (!e) var e = e;
            // e2.preventDefault();
            canvasX = e.pageX - canvas.offsetLeft;
            console.log(&quot;[mouseXY event] CanX array :&quot; + canvasX);
            canvasY = e.pageY - canvas.offsetTop;
            console.log(&quot;[mouseXY event] CanY array:&quot; + canvasY);
  
            //alert(&quot;X :&quot;+canvasX+&quot;Y :&quot;+canvasY);
  
            antX = canvas.width / 2 - 48;
            antY = canvas.height / 2 - 48;
            //alert(&quot;X :&quot;+antX+&quot;Y :&quot;+antY);
  
            if (canvasX &gt;= antX - 40 &amp;&amp; canvasX &lt;= antX + 40) {
              // Is touchY between (antY - 10) and (antY + 10)?
              if (canvasY &gt;= antY - 40 &amp;&amp; canvasY &lt;= antY + 40) {
                // The user touched the ant
                alert(&quot;Touched on image&quot;);
              }
            }
          });
        }
  
        function doTouchStart() {
          alert(&quot;T&quot;);
        }
        function select_element() {
          var offset = $div.offset();
          var x = ev.clientX - offset.left;
          var y = ev.clientY - offset.top;
          alert(&quot;X :&quot; + x + &quot;Y :&quot; + y);
        }
        function loaded() {
          /* document.getElementById('divId').style.width = canvas.width / 2 - 48;
  document.getElementById('divId').style.height = canvas.height / 2 - 48;
  document.getElementById('divId').style.zIndex = &quot;999&quot;; */
          //document.getElementById('divId');
  
          imageReady = true;
          setTimeout(update, 1000 / 60);
        }
        function resize() {
          canvas.width = canvas.parentNode.clientWidth;
          canvas.height = canvas.parentNode.clientHeight;
          redraw();
        }
        function redraw() {
          ctx.fillStyle = &quot;#000000&quot;;
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          if (imageReady) {
            ctx.drawImage(
              img,
              frame * 192,
              0,
              192,
              192,
              canvas.width / 2 - 48,
              canvas.height / 2 - 48,
              192,
              192
            );
          }
        }
  
        var frame = 0;
        function update() {
          //console.log('hi');
          redraw();
          frame++;
          if (frame &gt;= 2) frame = 0;
          setTimeout(update, 1000 / 10);
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body
      onresize=&quot;onresize()&quot;
      onload=&quot;onload()&quot;
      style=&quot;position: absolute; padding: 0; margin: 0; height: 100%; width: 100%&quot;
    &gt;
      &lt;img
        class=&quot;clickable&quot;
        alt=&quot;simple1&quot;
        id=&quot;bg&quot;
        src=&quot;img/blink.png&quot;
        style=&quot;position: absolute; display: none; z-index: 1&quot;
      /&gt;
      &lt;canvas id=&quot;gameCanvas&quot; style=&quot;position: absolute&quot;&gt;&lt;/canvas&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Any help would be much appreciated.</p>