CODEWITHSUNDEEP
javascripthtml5-canvas
Anurag
Anurag

Reputation: 227

drawing Inscribe a Circle in a Triangle using a canvas

I am creating "Inscribe a Circle in a Triangle using a canvas". But facing lots of problem. Well I tried to draw and Triangle in the middle of the canvas though its created i am wondering where to start drawing an circle which could be perfectly work for me.

With respective to mathematically I knew to draw circle, but when it comes to java script i am stuck.

kindly help me.

Thanks.

i have tried the following code to draw an traing at center of the canvas:-

var c=document.getElementById("myCanvas");
var context =c.getContext("2d");

check(ctx, 100, c.width/2, c.height/2);

function check(ctx, side, cx, cy){

    var h = side * (Math.sqrt(3)/2);

    ctx.strokeStyle = "black";
    ctx.save();
    ctx.translate(cx, cy);
    ctx.beginPath();
    ctx.moveTo(0,-h/2);
    ctx.lineTo(-side/2, h / 2);  // line a
    ctx.lineTo(side /2, h / 2); // line b
    ctx.lineTo(0,-h /2);            // line c
    ctx.stroke();
    ctx.closePath();
    ctx.save();

}

enter image description here

like this i want..

Upvotes: 3

Views: 2566

Answers (1)

Prasath K
Prasath K

Reputation: 5018

Ok check this .. Live Demo for equilateral triangle

Radius of circle inscribed in equilateral triangle = Sqrt(3)/6 * side of triangle;

window.onload = function()
{
var c=document.getElementById("myCanvas");
var context =c.getContext("2d");

check(context,100,c.width/2,c.height/2);
circle(context,100,c.width/2,c.height/2);
}

function check(ctx, side, cx, cy){

    var h = side * (Math.sqrt(3)/2);

    ctx.strokeStyle = "black";
    ctx.save();
    ctx.translate(cx, cy);
    ctx.beginPath();
    ctx.moveTo(0,-h/2);
    ctx.lineTo(-side/2, h / 2);  // line a
    ctx.lineTo(side /2, h / 2); // line b
    ctx.lineTo(0,-h /2);            // line c
    ctx.stroke();
    ctx.closePath();
    ctx.restore();

}

function circle(ctx,side,cx,cy)
{
    var h = side * (Math.sqrt(3)/2);
    var radius = Math.sqrt(3)/6 * side; // Radius of the circle
    cy = cy + h/2 - radius;       // Center Y of circle
    ctx.beginPath();
    ctx.arc(cx,cy,radius,0,Math.PI * 2,false);
    ctx.stroke();
    ctx.closePath();
}

Check all formulas to find the radius of circle inscribed in different triangles here

Upvotes: 2

Related Questions