Reputation: 38705

How do I draw in arrow on a web browser

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?

Upvotes: 3

Answers (6)

Demian Brecht

Reputation: 21368

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();

Upvotes: 1

Martin Beeby

Reputation: 4599

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

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

Upvotes: 1

mr.gadgets

Reputation: 21

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

Upvotes: 1

JaredMcAteer

Reputation: 22536

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)

Upvotes: 4