title: How to call JavaScript to draw in a canvas for each table row?
body: <p>I have an ASP.NET Razor View like this:</p>
  
  <pre><code>@{
      this.Layout = null;
  }
  &lt;script type="text/javascript"&gt;
  
      function drawWindArrow(canvas, windDirection) {
          // Draw something
  }
  
  &lt;/script&gt;
  
  &lt;table style="width: 100%"&gt;
      @foreach (var weather in ViewBag.WeatherForecastList)
      {
          double windDirection = weather.WindDirection;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;canvas width="32" height="32"&gt;&lt;/canvas&gt;
                  How can I call drawWindArrow with the canvas and the windDirection as a parameter???
              &lt;/td&gt;
          &lt;/tr&gt;
      }
  &lt;/table&gt;
  </code></pre>
  
  <p>I would like to draw something in the canvas that is different for each row in the table. It should look similar to the arrows found here: <a href="http://www.yr.no/sted/Norge/Oslo/Oslo/Oslo/" rel="nofollow">http://www.yr.no/sted/Norge/Oslo/Oslo/Oslo/</a>, but I don't want to use static images, since I need to draw with different colors based on some CSS3 styles.</p>
  
  <p>How can I call the drawWindArrow JavaScript function with the canvas and the windDirection as a parameter?</p>