How do I draw in arrow on a web browser

Question

Given two point, (x, y) and (x1, y1) , how do I draw an arrow between these point a the web browser. Can jQuery or HTML5 does this?

Answer 1

You'll also need a little high school trigonometry to draw the arrowhead.

var arrowHeadLength = 10; //whatever arbitrary value you want
// Line angle
var lineAngle = Math.atan ( (Y2-Y1)/(X2-X1) )
// Angle for arrow heads
var end1 = lineAngle + 45 * Math.PI/180
var end2 = lineAngle - 45 * Math.PI/180
// end points of arrow heads
var y3 = y2 - arrowHeadLength * Math.sin(end1)
var x3 = x2 - arrowHeadLength * Math.cos(end1)
var y4 = y2 - arrowHeadLength * Math.sin(end2)
var x4 = x2 - arrowHeadLength * Math.cos(end2)

Answer 2

HTML5 canvas tag. Check out the tutorials here...

https://developer.mozilla.org/en/canvas_tutorial

Here is a quick demo:

http://jsfiddle.net/wdm954/rueTn/1/

Answer 3

You'll need to use canvas or svg, you can google for libraries that make using those two technologies a little easier.

Answer 4

You can do it quite easily using the canvas element with some JavaScript. Check out some basic canvas functionality here .

As an example (with an existing canvas element):

var context = document.getElementById('canvas').getContext('2d');
context.moveTo(0, 200);
context.lineTo(200, 0);
context.strokeStyle = '#000';
context.stroke();

Answer 5

The code is as follow

<canvas id="arrow" style="border:1px solid;background-color:#000000;" width="300" height="300">Your web browser does not supports HTML5!</canvas>

<script>
function drawArrow() {
 var canvas = document.getElementById('arrow');
 var context = canvas.getContext('2d');
 context.lineWidth = 3;
 context.lineJoin = 'round';
 context.strokeStyle = '#ffffff';
 context.save();
 context.beginPath();
 context.moveTo(43,150);
 context.lineTo(250,150);
 context.stroke();
 context.beginPath();
 context.moveTo(250,150);
 context.lineTo(200,80);
 context.stroke();
 context.beginPath();
 context.moveTo(250,150);
 context.lineTo(200,220);
 context.stroke();
}
window.addEventListener("load", drawArrow, true);
</script>

the head of the arrow however, will not close up nicely unless you continue to draw the line from the beginning to the end. The backup sample is on this post http://gadgets-code.com/draw-arrow-on-html5-canvas

Answer 6

You could do it in SVG, this should work in IE7,IE8, IE9, chrome, safari, opera and firefox

http://jsfiddle.net/thebeebs/g46Gz/