title: How can I make a star rating in a canvas?
body: <p>I've got a html page generated with xslt which lists a few made-up restaurants, and I've been trying to add a star-rating to them. I've managed to get it working as a separate piece of code, in browser and in the w3schools code editor, but I can't get it to display in the main page.</p>
  
  <p>There have been similar questions asked before, and I've tried the suggestions in the answers to those (moving the script to an external .js file, putting some unused html tags in the page so the script refers to permanent html instead of dynamically generated) but they haven't worked.</p>
  
  <p>A few code snippets to show what I'm trying to do (a lot of code omitted to keep it concise):</p>
  
  <p>xml:</p>
  
  <pre><code>&lt;restaurants&gt;
  ...
  &lt;restaurant&gt;
      &lt;name&gt;&lt;/name&gt;
      &lt;rating&gt;&lt;/rating&gt;
  &lt;/restaurant&gt;
  ...
  &lt;/restaurants&gt;
  </code></pre>
  
  <p>xsl stylesheet:</p>
  
  <pre><code>&lt;body&gt;
      &lt;h1&gt;Restaurants List&lt;/h1&gt;
      &lt;xsl:for-each select="restaurants/restaurant"&gt;
          &lt;canvas id="rating" width="181px" height="28px"&gt;
              &lt;xsl:value-of select="rating"/&gt;
          &lt;/canvas&gt;
              Rating: &lt;xsl:value-of select="rating"/&gt;/5
              &lt;hr/&gt;
      &lt;/xsl:for-each&gt;
  
      &lt;img src="images/star.png" id="star" width="29px"&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>javaScript (between <code>&lt;script&gt;</code> tags in <code>&lt;head&gt;</code> of xsl stylesheet):</p>
  
  <pre><code>function rate() {
      var c = document.getElementById("rating");
      var ctx = c.getContext("2d");
      var img = document.getElementById("star");
      var num = document.getElementById("rating").innerHTML * 29;
      ctx.rect(0,0,num,28);
      ctx.fillStyle = ctx.createPattern(img, 'repeat-x');
      ctx.fill();
  }
  </code></pre>
  
  <p>The result of this is a list of restaurants, each with an empty 181x28 canvas next to it.</p>
  
  <p>The following snippet works on the w3schools' Tryit editor:</p>
  
  <pre><code>&lt;body onload="draw()"&gt;
    &lt;p&gt;image to use:&lt;/p&gt;
    &lt;img src="https://i.imgur.com/POxaCQd.png" id="star" width="29" height="28"&gt;
    &lt;br&gt;
    &lt;canvas id="myCanvas" height="28" width="100"&gt;3.5&lt;/canvas&gt;
  &lt;/body&gt;
  
  &lt;script&gt;    
  function draw() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("star")
    var pat = ctx.createPattern(img, 'repeat-x');
    var r = c.innerHTML * 29
    ctx.rect(0, 0, r, 28);
    ctx.fillStyle = pat;
    ctx.fill();
  }    
  &lt;/script&gt;
  </code></pre>
  
  <p>It also worked in JSFiddle, but only if it was all pasted into the html field; if it was separated into html and javaScript it stopped working (I could be misusing the fiddle, I'm not sure):
  <a href="https://jsfiddle.net/pqzqbejz/2/" rel="nofollow noreferrer">https://jsfiddle.net/pqzqbejz/2/</a>
  vs.
  <a href="https://jsfiddle.net/pqzqbejz/3/" rel="nofollow noreferrer">https://jsfiddle.net/pqzqbejz/3/</a>
  <hr>
  Side note: as mentioned, the code works in the w3schools' editor, including the xml/xslt editor, however when implemented the stars only appear next to the first restaurant in the list. Assuming the main issue is fixed, any further ideas on how to get it to show up for all of them? I've tried a, xsl:for-each loop, and putting the function call in the onload in each canvas hoping it would be called each time a canvas was created, but I suspect the problem is the function uses element IDs, and I can't have multiple canvases that share an id. Either way, this is less important to me than the main issue, but any and all help is appreciated.</p>