title: Setting <canvas> id with jQuery
body: <p>Good morning!</p>
  
  <p>I'm trying to change an icon id that is inside a canvas element.</p>
  
  <p>This looks fine to me, but there must be something I don't quite get since it doesn't work (no icon is shown on the page, just blank space) and the console doesn't return any error. If it helps, "weather" is a string.</p>
  
  <pre><code>&lt;canvas id="wIcon" width="150" height="150"&gt;&lt;/canvas&gt;
  ----------
  $("#wIcon").prop("id",weather);
  </code></pre>
  
  <p>Thanks in advance!</p>
  
  <p>Edit: more precisely,</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script src="https://rawgithub.com/darkskyapp/skycons/master/skycons.js"&gt;&lt;/script&gt;
  &lt;!--not relevant HTML--&gt;
  &lt;canvas id="snow" width="64" height="64"&gt;&lt;/canvas&gt;
  &lt;!--not relevant HTML--&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>var icons = new Skycons({"color": "orange"});
  
  icons.set("clear-day", Skycons.CLEAR_DAY);
  icons.set("clear-night", Skycons.CLEAR_NIGHT);
  icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY);
  icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
  icons.set("cloudy", Skycons.CLOUDY);
  icons.set("rain", Skycons.RAIN);
  icons.set("sleet", Skycons.SLEET);
  icons.set("snow", Skycons.SNOW);
  icons.set("wind", Skycons.WIND);
  icons.set("fog", Skycons.FOG);
  </code></pre>
  
  <p>What I wanted to do was changing the <a href="https://darkskyapp.github.io/skycons/" rel="nofollow noreferrer">icon</a> displayed in the document with another one from the set by changing its id. The relevant string was stored in the weather variable, so I thought it was easy to change from one to the other based on what I had in weather with:</p>
  
  <pre><code>$("#snow").prop("id",weather);
  </code></pre>
  
  <p>or, as suggested here,</p>
  
  <pre><code>$("#snow").attr("id",weather);
  </code></pre>
  
  <p>Sounds like I don't understand this canvas thing enough, so I turned to another solution, that is using <a href="https://erikflowers.github.io/weather-icons/" rel="nofollow noreferrer">Weather Icons</a> which worked out wonderfully using .addClass to the icon (see the <a href="https://codepen.io/fender90/pen/PjmLqj" rel="nofollow noreferrer">Pen</a> if you are curious, and maybe even want to give me a piece of advice about it!), but I'm leaving this question here anyway for future reference if a solution is found.</p>