title: can you animate an image on a canvas
body: <p>since I'm learning new to html and javascript, I was wondering if you can place an moving image side to side on a canvas? If so how can this be done please???</p>
  
  <p>Here's what I've to do so far.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="ann.css" /&gt;
  
  &lt;script&gt;
   window.onload = animate;
  
   var canvas=document.getElementById('mycanvas');
   var ctx=canvas.getContext('2d');
  
   function animate()
   {
   window.setInterval(slide,1000);
   }
  
  
  
   function slide()
   {
   var obj = document.getElementById("ball");
   var left = obj.style.left;
   if(left === ''){
      left = 0;
   }
   var wartosc = parseInt(left, 10);
   obj.style.left = (wartosc + 10) + "px";
   }
  
  function Loop() {
  if (left&gt;canvas.width){
      var right = obj.style.right;
   if(right === ''){
      right = 0;
   }
   var wartosc = parseInt(right, 10);
   obj.style.right = (wartosc + 10) + "px";
  
   }
   &lt;/script&gt;
  
   &lt;style&gt;
   #ball
   {
      position: relative;
      left: 1px;
   }
   #mycanvas {border:1px solid #000000}
   &lt;/style&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
    &lt;img src="ball.gif" id="ball" alt="Usmiech" width="30" height="30" /&gt;
  
  
    &lt;canvas id=mycanvas width=600 height=50&gt;Canvas Not Supported
    &lt;/canvas&gt;
  
  &lt;body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I want it do to is for the image to be contained inside the canvas and to move left to right and when reached the right side of canvas to go back left and so on continuously.</p>
  
  <p>However my problems are if can be done, I don't know how I can put the image on the canvas and then I can't make the image move to the right once it has reached the end off the canvas. I think the issue is my loop function, which is there to try to make it go to the right.</p>
  
  <p>As you can see from the fiddle link, when I remove the loop function code it works. However it will only goes to the left.</p>
  
  <p><a href="http://jsfiddle.net/eCSb4/18/" rel="nofollow">http://jsfiddle.net/eCSb4/18/</a></p>
  
  <p>Please can someone help me fix it?  :)</p>