place html canvas in table cells - html

Question

I have a table. I am trying to display inside the tally boxes column the html canvas I created. I have a 10 records so the canvas should display 10 times inside the table. This is what I've done so far:
var c4 = document.getElementById("c4");
var c4_context = c4.getContext("2d");
function Vertical_2px_Red() {
for (i=0;i<10;i++){
c4_context.beginPath();
c4_context.moveTo(20+i*100, 20);
c4_context.lineTo(100+i*100, 20);
c4_context.moveTo(20+i*100, 20);
c4_context.lineTo(20+i*100, 100);
c4_context.moveTo(100+i*100, 20);
c4_context.lineTo(100+i*100, 100);
c4_context.moveTo(20+i*100, 20);
c4_context.lineTo(100+i*100, 100);
c4_context.moveTo(100+i*100, 100);
c4_context.lineTo(20+i*100, 100);
c4_context.strokeStyle = "Red";
c4_context.stroke();
}
}
My html form:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>{{label.table.cName}}</td>
<td colspan="2">{{label.table.cVote}}</td>
<td>{{label.table.cTB}}</td>
<td>{{label.table.cNV}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,value) in candidates[0]">
<td>{{value.no}} {{label.table.period}} {{value.name}}</td>
<td>{{value.votes}}</td>
<td><canvas id="c4" width="500" height = "200" style="border:solid 1px #000000;"></canvas></td>
</tr>
</tbody>
</table>
</div>
The canvas output is 10 tally boxes.
Now, I want to display the canvas output to the tally boxes column of each row. But it doesn't work. What is the mistake I've done. Any answer would be much appreciated. Thank you

Answer 1

You'll need to give each canvas a unique ID,for one thing. Technically it's not legal to have > 1 item with the same ID. Construct the ID using something in the value of your ng-repeat. Maybe value.no if that is a unique number.
You'll need to modify your javascript to get the appropriate contexts and write into them. Probably do that at the end of the page or on a page load.
Or the better way is probably to make a directive that contains your canvas and the necessary function to draw into it. The directive will be responsible for creating the unique ID based on the values passed in and it will then know how to reference and draw into the context.