Equilateral triangle inscribed in a circle
JavaScript
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var diameter = canvas.width = canvas.height = 400;
var radius = diameter / 2;
var width = radius;
var height = width;
var PiBy180 = Math.PI / 180;
var deg2rad = function(deg) {
return deg * PiBy180
};
var xMult = -Math.cos(deg2rad(60));
var yMult = Math.sin(deg2rad(60));
document.body.appendChild(canvas);
function centeredSquare(size){
centeredRectangle(size, size);
}
function centeredRectangle(width, height) {
ctx.strokeRect(-width, -height, width * 2, height * 2);
}
function centeredCircle(radius) {
ctx.moveTo(radius, 0);
ctx.arc(0, 0, radius, 0, deg2rad(360), false);
}
function centeredEquilateralTriangle(size) {
ctx.moveTo(size, 0);
ctx.lineTo(xMult * size, yMult * size);
ctx.lineTo(xMult * size, -yMult * size);
ctx.lineTo(size, 0);
}
function centeredPoly(size, sides) {
var i = sides;
for ( var i=0; i <= sides; i++ ) {
var renderTo = i === 0 ? 'moveTo' : 'lineTo';
var x = Math.sin( i * Math.PI * 2 / sides ) * size;
var y = Math.cos( i * Math.PI * 2 / sides ) * size;
ctx[ renderTo ]( x, y );
}
}
// make more like a traditional grid
ctx.translate(canvas.width / 2, canvas.height / 2);
//centeredCircle(width);
//centeredCircle(width/2)
//centeredCircle(width/4)
//centeredEquilateralTriangle(width/4);
centeredPoly(width / 2, 5 );
centeredPoly(width / 3, 4 );
centeredPoly(width / 5, 3 );
// finish
ctx.stroke();