SamAsEnd/index.html

## index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Multi Media Class</title>
    <style>
        canvas {
            border: 1px #000 solid;
            margin: 50px auto;
            display: block;
        }
    </style>
</head>
<body>

<canvas id="cid" width="500" height="300"></canvas>

<script>
    canvas = document.getElementById('cid');
    context = canvas.getContext("2d");

    context.fillStyle = 'green';
    context.fillRect(0, 0, 500, 100);

    context.fillStyle = 'yellow';
    context.fillRect(0, 100, 500, 100);

    context.fillStyle = 'red';
    context.fillRect(0, 200, 500, 100);

    context.fillStyle = 'blue';
    context.arc(250, 150, 65, 0, 360);
    context.fill();

    // skip this part if you have a Arithmophobia (maths phobia) ;)
    function star(context, center_x, center_y, radius, color, lineWidth) {
        var center_point = [center_x, center_y],
        // Math.* trig functions work on radian, i think :)
                radian_72 = 72 * Math.PI / 180,
                radian_36 = 36 * Math.PI / 180,

                smallH = Math.round(Math.cos(radian_72) * radius),
                bigH = Math.round(Math.cos(radian_36) * radius),
                smallW = Math.round(Math.sin(radian_36) * radius),
                bigW = Math.round(Math.sin(radian_72) * radius);

        var point_a = [center_point[0], center_point[1] - radius],
                point_b = [center_point[0] + smallW, center_point[1] + bigH],
                point_c = [center_point[0] - bigW, center_point[1] - smallH],
                point_d = [center_point[0] + bigW, center_point[1] - smallH],
                point_e = [center_point[0] - smallW, center_point[1] + bigH];

        // set the stroke color
        context.strokeStyle = color;
        // set the stroke line width
        context.lineWidth = lineWidth;

        // starting point
        context.moveTo(point_a[0], point_a[1]);

        // the star
        context.beginPath();
        context.lineTo(point_b[0], point_b[1]);
        context.lineTo(point_c[0], point_c[1]);
        context.lineTo(point_d[0], point_d[1]);
        context.lineTo(point_e[0], point_e[1]);
        context.lineTo(point_a[0], point_a[1]);
        context.closePath();

        context.stroke();
    }

    star(context, 250, 150, 50, 'yellow', 5);
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Multi Media Class</title>
	<style>
	canvas {
	border: 1px #000 solid;
	margin: 50px auto;
	display: block;
	}
	</style>
	</head>
	<body>

	<canvas id="cid" width="500" height="300"></canvas>

	<script>
	canvas = document.getElementById('cid');
	context = canvas.getContext("2d");

	context.fillStyle = 'green';
	context.fillRect(0, 0, 500, 100);

	context.fillStyle = 'yellow';
	context.fillRect(0, 100, 500, 100);

	context.fillStyle = 'red';
	context.fillRect(0, 200, 500, 100);

	context.fillStyle = 'blue';
	context.arc(250, 150, 65, 0, 360);
	context.fill();

	// skip this part if you have a Arithmophobia (maths phobia) ;)
	function star(context, center_x, center_y, radius, color, lineWidth) {
	var center_point = [center_x, center_y],
	// Math.* trig functions work on radian, i think :)
	radian_72 = 72 * Math.PI / 180,
	radian_36 = 36 * Math.PI / 180,

	smallH = Math.round(Math.cos(radian_72) * radius),
	bigH = Math.round(Math.cos(radian_36) * radius),
	smallW = Math.round(Math.sin(radian_36) * radius),
	bigW = Math.round(Math.sin(radian_72) * radius);

	var point_a = [center_point[0], center_point[1] - radius],
	point_b = [center_point[0] + smallW, center_point[1] + bigH],
	point_c = [center_point[0] - bigW, center_point[1] - smallH],
	point_d = [center_point[0] + bigW, center_point[1] - smallH],
	point_e = [center_point[0] - smallW, center_point[1] + bigH];

	// set the stroke color
	context.strokeStyle = color;
	// set the stroke line width
	context.lineWidth = lineWidth;

	// starting point
	context.moveTo(point_a[0], point_a[1]);

	// the star
	context.beginPath();
	context.lineTo(point_b[0], point_b[1]);
	context.lineTo(point_c[0], point_c[1]);
	context.lineTo(point_d[0], point_d[1]);
	context.lineTo(point_e[0], point_e[1]);
	context.lineTo(point_a[0], point_a[1]);
	context.closePath();

	context.stroke();
	}

	star(context, 250, 150, 50, 'yellow', 5);
	</script>

	</body>
	</html>