HTML5 Canvas Example

by Ayan Ghatak

HTML

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
function drawTriangle(PosX, PosY, SideLength, Orientation) {

	if (!Orientation) {
  	Orientation = 'east';
  }
    
	context.beginPath();

    var sides = 3;

    var a = ((Math.PI * 2) / sides);
    // the components have negative contributions
    if (Orientation === 'west' || Orientation === 'north') {
    	SideLength *= -1;
    }
    
    if (Orientation === 'east' || Orientation === 'west') {
    	context.moveTo(PosX + SideLength, PosY);

	    for (var i = 1; i < sides + 1; i++) {
	        context.lineTo(PosX + SideLength * Math.cos(a*i), PosY + SideLength * Math.sin(a*i));
	    }
    }
    else if (Orientation === 'south' || Orientation === 'north') {
    	context.moveTo(PosY, PosX + SideLength);

	    for (var i = 1; i < sides + 1; i++) {
	        context.lineTo(PosY + SideLength * Math.sin(a*i), PosX + SideLength * Math.cos(a*i));
	    }
    }
	context.stroke();
    context.closePath();
}
drawTriangle(100,75,50, 'east');
//drawTriangle(100,75,50, 'west');
//drawTriangle(100,75,50, 'north');
//drawTriangle(100,75,50, 'south');