<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<!--[if lte IE 8]>
<script src="excanvas.js"></script>

function doIt() {
var canvas = document.getElementById("my_canvas_id");
c = canvas.getContext('2d');

// Define a regular polygon with n sides, centered at (x,y)
// with radius r. The vertices are equally spaced along the
// circumference of a circle. Put the first vertex straight
// up or at the specified angle. Rotate clockwise, unless
// the last argument is true.
function polygon(c,n,x,y,r,angle,counterclockwise) {
angle = angle || 0;
counterclockwise = counterclockwise || false;
// Compute vertex position and begin a subpath there
c.moveTo(x + r*Math.sin(angle),
y - r*Math.cos(angle));
var delta = 2*Math.PI/n; // Angle between vertices
for(var i = 1; i < n; i++) { // For remaining vertices
// Compute angle of this vertex
angle += counterclockwise?-delta:delta;
// Compute position of vertex and add a line to it
c.lineTo(x + r*Math.sin(angle),
y - r*Math.cos(angle));
c.closePath(); // Connect last vertex back to the first

// Start a new path and add polygon subpaths

polygon(c, (document.getElementById("Text4").value), 100, 100, (document.getElementById("Text1").value), parseFloat(document.getElementById("Text5").value) * Math.PI/4); // Square
// Set properties that control how the graphics will look
c.fillStyle = document.getElementById("Text6").value // Light-gray interiors
c.strokeStyle = document.getElementById("Text2").value; // outlined with dark-blue lines
c.lineWidth = parseInt(document.getElementById("Text3").value); // five pixels wide.
// Now draw all the polygons (each in its own subpath)

  talpha = parseFloat(document.getElementById("tbalpha").value);
  	if(!(talpha >= 0 && talpha <= 1)) talpha = 1.0;
	c.globalAlpha = talpha;

c.fill(); // Fill the shapes
c.stroke(); // And stroke their outlines



<body onload="doIt();" onunload="opener.newWind7 = null";>
<div style="float:left; border: thick #800000 solid; height: 200px; width: 200px"><canvas id="my_canvas_id" width=200 height=200></canvas></div>


radius (of containing circle)(px): <input name="Text1" id="Text1" type="text" value="50" size="5" /><br />
stroke color: <input name="Text2" id="Text2" type="text" value="#008" size="5" /><br />
stroke width: <input name="Text3" id="Text3" type="text"value="5" size="5" /><br />
Number of sides: <input name="Text4" id="Text4" type="text" value="3" size="5" /><br />
Rotation (try different values) n: <input name="Text5" id="Text5" type="text" value="0" size="5" /><br />
Fill color: <input name="Text6" id="Text6" type="text" value="#ccc" size="5" /><br />
ALPHA (0.0 - 1.0): <input type="text" size="3" id="tbalpha" value="1.0" />
<br />
DoIt: <input name="Button1" type="button" value="Make my Shape" onclick="doIt();" />