Rotate arrowheads in radarplot with Canvas - php

Question

I am trying to add arrowheads to my radar/spider plot coded in Canvas. Because I use PHP/SQL to retrieve some database values I echo most of the needed JS to plot it on the Canvas. So far I have drawn the axis (7) and guidelines (5 values).
How can I rotate the arrowheads so they show up correctly; with an angle and at the end of the 7 axis?
function drawArrows(context){
context.beginPath();
context.strokeStyle = "#ccc";
context.lineWidth = 2;
context.save();
<?php
$arrowHoek = 35;
$cHoek = (360/7);
$arrowLength = 10;
for ($i = 1 ; $i < 8 ; $i++) {
$arrow_xleft = round((getCoordinates($i,6,x))-(sin(deg2rad($arrowHoek))*$arrowLength),2);
$arrow_yleft = round((getCoordinates($i,6,y))+(cos(deg2rad($arrowHoek))*$arrowLength),2);
$arrow_xright = round((getCoordinates($i,6,x))+(sin(deg2rad($arrowHoek))*$arrowLength),2);
$arrow_yright = $arrow_yleft;
$arrow_rotation = deg2rad(($cHoek*$i)-$cHoek);
echo "\tcontext.moveTo(";
getCoordinates($i,6,null);
echo ");\n";
echo "\tcontext.lineTo($arrow_xleft, $arrow_yleft);";
echo "\n\tcontext.moveTo(";
getCoordinates($i,6,null);
echo ");\n";
echo "\tcontext.lineTo($arrow_xright, $arrow_yright);\n";
echo "\tcontext.rotate($arrow_rotation);\n";
echo "\tcontext.restore();\n";
echo "\tcontext.save();\n";
}
?>
context.stroke();
}

Answer 1

Seems I worked it out! As found in other topics this uses the save(), translate(), rotate() and restore() functions. If you put this in a seperate Javascript function you can make transformations to individual Canvas parts without messing up any other drawings.
Below is the solution (note this uses PHP to echo the Javascript function).
function drawArrows(context){
context.beginPath();
context.strokeStyle = "#ccc";
context.lineWidth = 2;
<?php
$arrowHoek = 35;
$cHoek = (360/7);
$arrowLength = 10;
for ($i = 1 ; $i < 8 ; $i++) {
$arrow_xleft = -(sin(deg2rad($arrowHoek))*$arrowLength);
$arrow_yleft = (cos(deg2rad($arrowHoek))*$arrowLength);
$arrow_xright = (sin(deg2rad($arrowHoek))*$arrowLength);
$arrow_yright = $arrow_yleft;
$arrow_rotation = deg2rad(($cHoek*$i)-$cHoek);
echo "\tcontext.save();\n";
echo "\tcontext.translate(";
getCoordinates($i,6,null);
echo ");\n";
echo "\tcontext.rotate($arrow_rotation);\n";
echo "\tcontext.moveTo($arrow_xleft, $arrow_yleft);";
echo "\n\tcontext.lineTo(0,0);\n";
echo "\tcontext.lineTo($arrow_xright, $arrow_yright);\n";
echo "\tcontext.restore();\n";
}
?>
context.stroke();
}
Note: The declaration of the context and canvas elements are in a container function.