buddy-sandidge · November 23, 2011 07:15
diff --git a/index.html b/index.html
 <!doctype html>
 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
 <!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
 <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Canvas Example</title>
    <style>
        canvas {
            display: block;
            margin: 50px auto 0;
            width: 600px;
        }
    </style>
 </head>
 <body>
 <div role="main">
    <canvas id="can" width="600" height="600"></canvas>
 </div>
 <script>
 var LIB = LIB || {};

 (function () {
    var Draw = function () {
        if (!(this instanceof Draw)) {
            return new Draw();
        }
    };

    Draw.prototype.star = function (canvas, step, color) {
        var context = canvas.getContext('2d'),

            width = canvas.width,
            height = canvas.height,

            midX = width / 2,
            midY = height / 2,

            top = [],
            right = [],
            bottom = [],
            left = [],

            x = null,
            y = null;

        step = step || 10;
        color = color || '#000';

        for (y = 0; y < midX; y += step) {
            top.push({x: midX, y: y});
        }

        for (y = height; y > midX; y -= step) {
            bottom.push({x: midX, y: y});
        }

        for (x = 0; x < midY; x += step) {
            left.push({x: x, y: midY});
        }

        for (x = height; x > midY; x -= step) {
            right.push({x: x, y: midY});
        }

        context.moveTo(midX, 0);
        context.lineTo(midX, height);

        context.moveTo(0, midY);
        context.lineTo(width, midY);

        this._helper(context, left, top);
        this._helper(context, top, right);
        this._helper(context, right, bottom);
        this._helper(context, bottom, left);

        context.strokeStyle = color;
        context.stroke();
    };

    Draw.prototype._helper = function (context, src, dest) {
        var i = 0,
            j = dest.length - 1;

        while (j >= 0) {
            context.moveTo(src[i].x, src[i].y);
            context.lineTo(dest[j].x, dest[j].y);
            i += 1;
            j -= 1;
        }
    };

    LIB.Draw = Draw;
 }());

 (function (Draw) {
    var can = document.getElementById('can'),
        draw = new Draw();

    draw.star(can);
 }(LIB.Draw));
 </script>
 </body>
 </html>
	<!doctype html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Canvas Example</title>
	<style>
	canvas {
	display: block;
	margin: 50px auto 0;
	width: 600px;
	}
	</style>
	</head>
	<body>
	<div role="main">
	<canvas id="can" width="600" height="600"></canvas>
	</div>
	<script>
	var LIB = LIB \|\| {};

	(function () {
	var Draw = function () {
	if (!(this instanceof Draw)) {
	return new Draw();
	}
	};

	Draw.prototype.star = function (canvas, step, color) {
	var context = canvas.getContext('2d'),

	width = canvas.width,
	height = canvas.height,

	midX = width / 2,
	midY = height / 2,

	top = [],
	right = [],
	bottom = [],
	left = [],

	x = null,
	y = null;

	step = step \|\| 10;
	color = color \|\| '#000';

	for (y = 0; y < midX; y += step) {
	top.push({x: midX, y: y});
	}

	for (y = height; y > midX; y -= step) {
	bottom.push({x: midX, y: y});
	}

	for (x = 0; x < midY; x += step) {
	left.push({x: x, y: midY});
	}

	for (x = height; x > midY; x -= step) {
	right.push({x: x, y: midY});
	}

	context.moveTo(midX, 0);
	context.lineTo(midX, height);

	context.moveTo(0, midY);
	context.lineTo(width, midY);

	this._helper(context, left, top);
	this._helper(context, top, right);
	this._helper(context, right, bottom);
	this._helper(context, bottom, left);

	context.strokeStyle = color;
	context.stroke();
	};

	Draw.prototype._helper = function (context, src, dest) {
	var i = 0,
	j = dest.length - 1;

	while (j >= 0) {
	context.moveTo(src[i].x, src[i].y);
	context.lineTo(dest[j].x, dest[j].y);
	i += 1;
	j -= 1;
	}
	};

	LIB.Draw = Draw;
	}());

	(function (Draw) {
	var can = document.getElementById('can'),
	draw = new Draw();

	draw.star(can);
	}(LIB.Draw));
	</script>
	</body>
	</html>