I'm trying to do a simple graphical presentation of an angle stored in a mango point as a line drawn at that angle. I created meta points to store calculated coordinates for my lines. I'd like to use HTML5 'canvas' (again, the easiest way to achieve this). I'm stuck at trying to pass point values to the script:
I get mango values for offset:
<ma-get-point-value point-xid="offset_left" point="left"></ma-get-point-value>
<ma-get-point-value point-xid="offset_right" point="right"></ma-get-point-value>
and I want to pass them to a canvas:
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, {{left.value}});
ctx.lineTo(100, {{right.value}});
ctx.stroke();
</script>
I tried using ng-init or <p id="...">, getElementByID, but no luck.
Any suggestions?
(I'm using Mango 2.8 on CentOS, and testing in Firefox)