How to draw arrow mark using jQuery

Can anyone help me in writing the code for drawing arrow mark?

I am working in html5 +jquery. Can ouu explain how to make that shape?

ctx.lineWidth = 3;
     ctx.lineJoin = 'round';
     ctx.strokeStyle = '#000000';
     ctx.save();
     ctx.beginPath();
     ctx.moveTo(43,150);
     ctx.lineTo(250,150);
     ctx.stroke();
     ctx.beginPa开发者_JS百科th();
     ctx.moveTo(250,150);
     ctx.lineTo(200,80);
     ctx.stroke();
     ctx.beginPath();
     ctx.moveTo(250,150);
     ctx.lineTo(200,220);
      ctx.stroke();

---

I assume you are referring to a html5 canvas and draw using jQuery.

So this is one of the jQuery plugin that may help you in creating an arrow mark as what you've said: http://plugins.jquery.com/node/14184/release

If you're new to jQuery, this tutorial might really help you: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Please have a look at the html source from http://lislis.sakura.ne.jp/canvas/arrowmark/arrowmark03.html

---

There is no jquery in this example but I thought I would share my modifications of "You-Day" script

    var drawUpArrow = function(id, width, height, colour ) {
        var canvas = document.getElementById('canvas-'+id);
        var ctx = canvas.getContext('2d');

        var xCoord=width/2;
        var yCoord=height/2;

        ctx.beginPath();
        ctx.moveTo(xCoord,0);
        ctx.lineTo(0,yCoord);
        ctx.lineTo(xCoord/2,yCoord);
        ctx.lineTo(xCoord/2,yCoord*2);
        ctx.lineTo(xCoord+xCoord/2,yCoord*2);
        ctx.lineTo(xCoord+xCoord/2,yCoord);
        ctx.lineTo(xCoord*2,yCoord);
        ctx.closePath();

        ctx.fillStyle = colour;
        ctx.fill();

        ctx.strokeStyle = colour;
        ctx.stroke();
    }
    var drawDownArrow = function(id, width, height, colour ) {
        var canvas = document.getElementById('canvas-'+id);
        var ctx = canvas.getContext('2d');

        var xCoord=width/2;
        var yCoord=height/2;

        ctx.beginPath();
        ctx.moveTo(xCoord,yCoord*2);
        ctx.lineTo(0,yCoord);
        ctx.lineTo(xCoord/2,yCoord);
        ctx.lineTo(xCoord/2,0);
        ctx.lineTo(xCoord+xCoord/2,0);
        ctx.lineTo(xCoord+xCoord/2,yCoord);
        ctx.lineTo(xCoord*2,yCoord);
        ctx.closePath();

        ctx.fillStyle = colour;
        ctx.fill();

        ctx.strokeStyle = colour;
        ctx.stroke();
    }
    window.onload = function(){
        drawDownArrow(1, 200,240, "#8ED6FF");
    }

---

This is the code for drawing Arrow:

<script>
var drawArrow = function(id,  width ) {
    var canvas = document.getElementById('canvas-'+id);
    var ctx = canvas.getContext('2d');

    var xCoord=5;
    var yCoord=5;

    ctx.lineWidth = 2;
    //ctx.save();
    var t = 10;//Math.round((xCoord+width)/10);

    ctx.beginPath();
    ctx.moveTo(xCoord,yCoord);
    ctx.lineTo(xCoord+5,yCoord+5);
    ctx.moveTo(xCoord,yCoord);
    ctx.lineTo(xCoord+5,yCoord-5);
    ctx.moveTo(xCoord,yCoord);
    ctx.lineTo(xCoord+width-t,yCoord);
    ctx.moveTo(xCoord+width-t,yCoord);
    ctx.lineTo(xCoord+width-(t+5),yCoord+5);
    ctx.moveTo(xCoord+width-t,yCoord);
    ctx.lineTo(xCoord+width-(t+5),yCoord-5);
    ctx.strokeStyle = '#FF0000';
    //ctx.fillStyle='#FF0000';
    ctx.fillStyle='rgba(255, 255, 255, 0)';
    ctx.stroke();
    ctx.fill(); 
    ctx.closePath();
}
</script>