<html5> draw triangle around circle

Question

I want if click the retacgle, draw a triangle around the circle.

source code like this...

but, triangle was not good each of positions..

How can i draw a triangle around the circle like attached image...

http://i.stack.imgur.com/hccCQ.jpg

    ....
    ....



            ost = 30515;
            oen = 31570;

            //ost = 74147;
            //oen = 75664;

            color="255,0,0";
            av = (ost+oen) /2 ;
            x1 = centerX-radius*Math.sin(-arg*av);
            y1 = centerY-radius*Math.cos(-arg*av);
            x2 = centerX-radius*Math.sin(-arg*av)*1.07;
            y2 = centerY-radius*Math.cos(-arg*av)*1.07;

            var s={x1:x1,y1:y1,x2:x2,y2:y2};        
            triShape(s,color,true);

    ...
    ...

// draw a circle by retacgle

          function Shape_sub(s, k, color, draw){
            ctx_sub.save();
            //ctx_sub.rotate(Math.PI * 2 / 12); 
        ctx_sub.fillStyle='rgb('+color+')';
            ctx_sub.imageSmoothingEnabled = true;
        ctx_sub.beginPath();
        ctx_sub.moveTo(s.x1,s.y1);
        ctx_sub.lineTo(s.x2,s.y2); 
        ctx_sub.lineTo(s.x3,s.y3); 
        ctx_sub.lineTo(s.x4,s.y4); 
        ctx_sub.lineTo(s.x1,s.y1);
        if(draw){
            ctx_sub.fill();
            ctx_sub.stroke();
        }
            ctx_sub.restore();

        }

// draw a triangle around the circle --> but not run....

          function triShape(s,color,draw){
            ctx_sub.save();
            //ctx_sub.rotate(Math.PI * 2 / 12); 
        ctx_sub.fillStyle='rgb('+color+')';
            ctx_sub.imageSmoothingEnabled = true;
        ctx_sub.beginPath();
        ctx_sub.moveTo(s.x1,s.y1);
            ctx_sub.lineTo(s.x1,s.y1); 
        ctx_sub.lineTo(s.x2,s.y2); 

        if(draw){
            ctx_sub.fill();
            ctx_sub.stroke();
        }
            ctx_sub.restore();
        }

    ..
    ....

Answer 1

Here's one way using trigonometry:

Example code and a Demo: http://jsfiddle.net/m1erickson/7domgxf4/

// variables to define the circle and triangle
var PI=Math.PI;
var cx=150;
var cy=150;
var radius=100;
var triLength1=35;
var triLength2=18;
var triSweep=PI*2/3;
var rAngle=0;


function triCircle(){

    // calc triangle tip point (on circle's circumference);
    var x0=cx+radius*Math.cos(rAngle);
    var y0=cy+radius*Math.sin(rAngle);

    // calc outer side of triangle
    var tricx=cx+(radius+triLength1)*Math.cos(rAngle);
    var tricy=cy+(radius+triLength1)*Math.sin(rAngle);

    // calc remaining 2 triangle points
    var x1=tricx+(triLength2)*Math.cos(rAngle-PI/2);
    var y1=tricy+(triLength2)*Math.sin(rAngle-PI/2);
    var x2=tricx+(triLength2)*Math.cos(rAngle+PI/2);
    var y2=tricy+(triLength2)*Math.sin(rAngle+PI/2);

    // draw the circle and the triangle
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.arc(cx,cy,radius,0,Math.PI*2);
    ctx.closePath();
    ctx.moveTo(x0,y0);
    ctx.lineTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.closePath();
    ctx.stroke();
}

[ Addition ]

You can calculate the angle of any point versus the centerpoint like this:

var dx= s.x1 - centerX;
var dy= s.y1 - centerY;

rAngle= Math.atan2(dy,dx);

triCircle();