Easiest way to pass mango point value to a script?

[Vlasta]

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)

[CraigWeb]

Hi Vlasta

Using canvas makes it a lot harder as you would need to wrap everything in a angular component. You can find more information on going that route on stack overflow
https://stackoverflow.com/questions/17960622/pass-angular-scope-variable-to-javascript

If you are not apposed to using SVG you could do something like this:

<div ng-init="page={left: '10', right: '100'}"></div>
<ma-get-point-value point-xid="offset_left" point="page.left"></ma-get-point-value>
<ma-get-point-value point-xid="offset_right" point="page.right"></ma-get-point-value>
<svg  width="200px" height="200px">
<line id="e1_line" x1="100" y1="0" x2={{page.right}} y2="100" style="stroke:red;fill:none;stroke-width:5px;"/>
</svg>

Another way you could do it is like this.

<div ng-init="page={left: '10', right: '45'}"></div>

<svg  width="200px" height="200px">
<line id="e1_line" x1="100" y1="0" x2=100 y2="100" style="stroke:red;fill:none;stroke-width:5px" transform='rotate({{page.right}},100,0)'/>

</svg>

[Vlasta]

Thanks Craig.
Using SVG is soooo much better idea than canvas.
Works perfect!