title: How can I refresh the data without breaking the canvas
body: <p>I have a basic weather application that gets data from forecast.io and displays icons using the related <a href="https://darkskyapp.github.io/skycons/" rel="nofollow noreferrer">skycons</a> which draw and animates icons using the html5 canvas</p>
  
  <p>Everything seems to works fine, but i have to update the weather regularly without refresh the whole page and the jquery Ajax load method seemed like an answer to my problem. The text data refresh fine and gets the new information but the canvas seems to break.  </p>
  
  <p>I managed to isolate the problem. It seems I don't understand how the html canvas works.<br>
  Here is a simpler problem</p>
  
  <p>This code draws a red rectangle and refreshes part of the page with the jquery load method</p>
  
  <pre><code>&lt;!-- jQuery --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="container"&gt;
      &lt;div id="weather"&gt;
          &lt;canvas id="icon"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
      var i = document.getElementById('icon');
      var c = i.getContext('2d');
      c.fillStyle = "red";
      c.fillRect(0, 0, 300, 300);
  &lt;/script&gt;
  
  &lt;script&gt;
      var container = $("#container");
      setInterval(function () {
          container.load("index.php #weather");
          console.log("refresh")
  
      }, 1000);
  &lt;/script&gt; 
  </code></pre>
  
  <p>Unfortunately, the red rectangle disappear on the reload. <a href="http://recordit.co/mGLjJ2ETqw" rel="nofollow noreferrer">gif</a><br>
  My question is, what should I do to make it stay/reappear?<br>
  I tried putting the canvas code inside the interval function after the load, but the rectangle appears for a fraction of a second to only vanish again?<br>
  Please try this on your own machines to confirm my problems<br>
  Can someone explain me how the canvas works and please guide me to a solution</p>
  
  <p>The problem is the same for my icons they blink for a second after the reload to disappear
  recordit.co/Ta6u5oVkie</p>