examples/Graphics_simple.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS: Simple Graphics Example</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<script src="../lib/easeljs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var canvas;
	var stage;
	function init() {
		canvas = document.getElementById('myCanvas');
		width = canvas.width;
		height = canvas.height;
		stage = new createjs.Stage(canvas);

		var s = drawSmiley();
		s.x = canvas.width / 2;
		s.y = canvas.height / 2;
		stage.addChild(s);
		stage.update();

	}

	function drawSmiley() {
		var s = new createjs.Shape();
		var g = s.graphics;

		//Head
		g.setStrokeStyle(10, 'round', 'round');
		g.beginStroke("#000");
		g.beginFill("#FC0");
		g.drawCircle(0, 0, 100); //55,53

		//Mouth
		g.beginFill(); // no fill
		g.arc(0, 0, 60, 0, Math.PI);

		//Right eye
		g.beginStroke(); // no stroke
		g.beginFill("#000");
		g.drawCircle(-30, -30, 15);

		//Left eye
		g.drawCircle(30, -30, 15);

		return s;
	}

</script>

</head>
<body onload="init()">

<header class="EaselJS">
	<h1>Vector Graphics</h1>

	<p>This example draws a simple vector smiley face using <code>Shape</code>
		and <code>Graphics</code>.</p>
</header>

<canvas id="myCanvas" width="960" height="400"></canvas>

</body>
</html>