[Solved] Draw a pin on Canvas using HTML5

by


Here’s an example of using path commands to draw a pin.

Assume you have an object defining the pin’s x,y & color:

var pin = { x:x, y:y, color:color };

Then you can draw that pin like this:

function drawPin(pin){

    ctx.save();
    ctx.translate(pin.x,pin.y);

    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.bezierCurveTo(2,-10,-20,-25,0,-30);
    ctx.bezierCurveTo(20,-25,-2,-10,0,0);
    ctx.fillStyle=pin.color;
    ctx.fill();
    ctx.strokeStyle="black";
    ctx.lineWidth=1.5;
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(0,-21,3,0,Math.PI*2);
    ctx.closePath();
    ctx.fillStyle="black";
    ctx.fill();

    ctx.restore();
}

3

solved Draw a pin on Canvas using HTML5