title: How to display a constantly changing image file in a browser without refresh flicker?
body: <p>I'm displaying an image (from a file) on the browser using html... I have another program that keeps taking a screenshot of my screen and storing it as an image file "image.jpeg". I am displaying this image on the browser periodically using setTimeout. However the image is not changing on the browser..</p>
  
  <p>Here is my code... I have used an Image object so that a new image is loaded everytime the javascript function runs, however that does not seem to be working...</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  
  &lt;script type="text/JavaScript"&gt;
  
  var x=0, y=0;
  var canvas, context, img;
  
  function timedRefresh(timeoutPeriod)
  {
      canvas = document.getElementById("x");
      context = canvas.getContext("2d");
      img = new Image();
      img.src = "image.jpeg";
      context.drawImage(img, x, y);
      x+=20; y+=20;
      //img.destroy();
      setTimeout("timedRefresh(1000)",timeoutPeriod);
  }
  
  &lt;/script&gt;
  
  &lt;title&gt;JavaScript Refresh Example&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body onload="JavaScript:timedRefresh(1000);"&gt;
  
  &lt;canvas id="x" width="600" height="600" /&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>