How to draw an arrow using javascript

Question

0.00/5 (No votes)

See more:

Hi..
Im creating signup page similar to gmail signup page. For that im using balloon popup extender in a custom style. But it displays only the shape without arrows like styles in rectangle or cloud. I tried with css,but arrow not coming in callout. How to draw that arrow using javascript?

Posted 1-Aug-12 19:25pm

Priyaaammu

Add a Solution

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

_Amy · Answer 1 · 2012-08-01T19:30:00

Solution 1

Hi,
Refer the links below;
jsDraw2D : 2D Graphics Library for JavaScript[^]
Documentation: How to Use the JavaScript Graphics Library[^]

--Amit

Posted 1-Aug-12 19:30pm

_Amy

Mike_1989 · Answer 2 · 2014-01-06T10:21:00

Please see HTML Canvas - Script solution hopefully this will help. I have also looked around the internet to find a solution, but didn't have much look in finding a solution.

To use this code copy and paste into <body></body> of HTML file.

JavaScript

<script>

function Arrow(x1, y1, x2, y2, Arrow_Type, Hex_Color, L_Width, Element_ID) {
    var c = document.getElementByID(Element_ID);
    var ctx = c.getContext("2d");

//SOHCAHTOA = SOH ( Sin(Radians) = Opposite / Hypotenuse ) - CAH ( Cos(Radians) = Adjacent / Hypotenuse ) - TOA ( Tan(Radians) = Opposite / Adjacent

//Set-Points for Arrow Head
    var A_start = 10;
    var O_start = 3.75;
    var H_start = Math.sqrt(Math.pow(A_Start, 2) + Math.pow(O_start, 2));
    var change_arrow_radians = Math.atan2(O_start, A_start);

//Calculate the change of the arrow head (i.e. horizontal, vertical or diagonal)

    var change_x_main = Math.abs(x1 - x2); //Adjacent, Calculate difference as an absolute value
    var change_y_main = Math.abs(y1 - y2); //Opposite, Calculate difference as an absolute value

    var change_angle_radians = Math.atan2(change_y_main, change_x_main);
    var change_angle_degrees = change_angle_radians * ( 180 / Math.PI); //Not Used, but could be used as below to confirm angle of arrow head

//alert("Angle of Arrow: " + change_angle_degrees); //remove comment

    var change_x_0_arrowhead = Math.cos(change_angle_radians + change_arrow_radians) * H_start;
    var change_y_0_arrowhead = Math.sin(change_angle_radians + change_arrow_radians) * H_start;
    var change_x_1_arrowhead = Math.cos(change_angle_radians - change_arrow_radians) * H_start;
    var change_y_1_arrowhead = Math.sin(change_angle_radians - change_arrow_radians) * H_start;



//draw arrow

    ctx.beginPath();
    ctx.lineWidth = L_Width;
    ctx.strokeStyle = Hex_Color;

//Determines type of arrow
if (Arrow_Type == true) { //To the inside of the circle
    if (((x1 < x2) && (y1 > y2)) || ((x1 == x2) && (y1 > y2))) {
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);

        ctx.moveTo(x1 + change_x_0_arrowhead, y1 - change_y_0_arrowhead);
        ctx.lineTo(x1, y1);
        ctx.lineTo(x1 + change_x_1_arrowhead, y1 - change_y_1_arrowhead);

    } else if ((x1 > x2) && (y1 > y2)) {
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);

        ctx.moveTo(x1 - change_x_0_arrowhead, y1 - change_y_0_arrowhead);
        ctx.lineTo(x1, y1);       
        ctx.lineTo(x1 - change_x_1_arrowhead, y1 - change_y_1_arrowhead);

    } else if (((x1 < x2) && (y1 < y2)) || ((x1 < x2) && (y1 == y2))) {
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);

        ctx.moveTo(x1 + change_x_0_arrowhead, y1 + change_y_0_arrowhead);
        ctx.lineTo(x1, y1);
        ctx.lineTo(x1 + change_x_1_arrowhead, y1 + change_y_1_arrowhead);

    } else if (((x1 > x2) && (y1 < y2)) || ((x1 > x2) && (y1 == y2)) || ((x1 == x2) && (y1 < y2))) {
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);

        ctx.moveTo(x1 - change_x_0_arrowhead, y1 + change_y_0_arrowhead);
        ctx.lineTo(x1, y1);
        ctx.lineTo(x1 - change_x_1_arrowhead, y1 + change_y_1_arrowhead);                                                 
               
    } 

} else { //To the outside of the circle
    if (((x1 < x2) && (y1 > y2)) || ((x1 < x2) && (y1 == y2)) || ((x1 == x2) && (y1 > y2))) {
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);

        ctx.moveTo(x2 - change_x_0_arrowhead, y2 + change_y_0_arrowhead);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x2 - change_x_1_arrowhead, y2 + change_y_1_arrowhead);

    } else if (((x1 > x2) && (y1 > y2)) || ((x1 > x2) && (y1 == y2))
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);

        ctx.moveTo(x2 + change_x_0_arrowhead, y2 + change_y_0_arrowhead);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x2 + change_x_1_arrowhead, y2 + change_y_1_arrowhead);
    } else if ((x1 < x2) && (y1 < y2)) {
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);

        ctx.moveTo(x2 - change_x_0_arrowhead, y2 - change_y_0_arrowhead);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x2 - change_x_1_arrowhead, y2 - change_y_1_arrowhead);

    } else if (((x1 > x2) && (y1 < y2)) || ((x1 == x2) && (y1 < y2))) {
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);

        ctx.moveTo(x2 + change_x_0_arrowhead, y2 - change_y_0_arrowhead);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x2 + change_x_1_arrowhead, y2 - change_y_1_arrowhead);

    }

}

ctx.stroke();

}

</script>

Hopefully this is easy enough to understand, it might be a long winded way of doing it but I find this easier to understand.

To use the above function copy the following into HTML file

HTML

<head>
    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=9" />
    <title></title></head>


<body>
<canvas id="FIG1" width="1000" height="1000" style="border-style:none; border-width:thin">
This text is displayed if your browser does not support HTML5 Canvas.</canvas>

<script>

Arrow(250, 400, 250, 0, true, "#000000", 1, "FIG1");

Arrow(250, 600, 250, 1000, true, "#000000", 1, "FIG1");

Arrow(240, 500, 0, 500, true, "#000000", 1, "FIG1");

Arrow(260, 500, 490, 500, true, "#000000", 1, "FIG1");

Arrow(240, 400, 0, 0, true, "#000000", 1, "FIG1");

Arrow(240, 600, 0, 1000, true, "#000000", 1, "FIG1");

Arrow(260, 400, 490, 0, true, "#000000", 1, "FIG1");

Arrow(260, 600, 490, 1000, true, "#000000", 1, "FIG1");

Arrow(750, 400, 750, 0, false, "#000000", 1, "FIG1");

Arrow(750, 600, 750, 1000, false, "#000000", 1, "FIG1");

Arrow(740, 500, 510, 500, false, "#000000", 1, "FIG1");

Arrow(760, 500, 1000, 500, false, "#000000", 1, "FIG1");

Arrow(740, 400, 510, 0, false, "#000000", 1, "FIG1");

Arrow(740, 600, 510, 1000, false, "#000000", 1, "FIG1");

Arrow(760, 400, 1000, 0, false, "#000000", 1, "FIG1");

Arrow(760, 600, 1000, 1000, false, "#000000", 1, "FIG1");


</script>

</body>

I would appreciate any comments on the above code

Thank You

Peter Leow · Answer 3 · 2014-01-06T17:50:00

Solution 3

If you are looking for speech bubbles, check this out: speech-bubble[^]
Hope it helps.

Posted 6-Jan-14 17:50pm

Peter Leow

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 4 · 2014-01-06T18:27:00

Solution 4

The most easiest method would be to show one Arrow Image.

Posted 6-Jan-14 18:27pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)