HTML5 circle and arrow with gradient background - html

Question

I need a function in HTML5 that with given context, x1, y1, x2, y2 would draw me a circle (at beginning of this vector) with arrow that represents the vector itself, that would have gradient background. Left image is what I got - I am not pleased with the result... right image is visualisation of what I would like to make.
Could anybody help me with that please?
This is my arrow function (circle is obvious):
function arrow(context, fromx, fromy, tox, toy){
var headlen = 10;
var angle = Math.atan2(toy-fromy,tox-fromx);
context.moveTo(fromx, fromy);
context.lineTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
context.moveTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
}

Answer 1

Ok, I'll bite...
If your arrow function is working fine now, you can also draw a circle in that function.
This modified arrow() will draw both the circle and arrow in gray.
Since you want to change the context state ( change fill/stroke to gray ) you should wrap the path drawing commands in context.save and context.restore.
You should (must!) begin all atomic path drawings with context.beginPath. This prevents path drawings from being inadvertently repeated.
This refactoring of your arrow uses context transforms to set the rotation point at x1,y1 and then draws the circle and then draws the arrow to x2,y2.
A Demo: http://jsfiddle.net/m1erickson/87T8d/
Example arrow function:
function arrow(x1,y1,x2,y2){
var dx=x2-x1;
var dy=y2-y1;
var radians=Math.atan2(dy,dx);
var length=Math.sqrt(dx*dx+dy*dy);
// save the unrotated context state
ctx.save();
// set the rotation point as x1,y1
ctx.translate(x1,y1);
// rotate the canvas by the angle of the vector
ctx.rotate(radians);
// draw the circle
ctx.beginPath();
ctx.arc(0,0,8,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle="gray"; // or gradient if you prefer
ctx.fill();
// draw the arrow
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(length,0);
ctx.lineTo(length-7,-4);
ctx.lineTo(length-7,4);
ctx.lineTo(length,0);
ctx.closePath();
ctx.fillStyle="gray";
ctx.fill();
ctx.strokeStyle="gray";
ctx.stroke();
// restore the context to its unrotated state
ctx.restore();
}