JS exercise 3 – Paths

This is a simple exercise to practice drawing paths inside canvas, using arcs, lines and curves.

This is the whole code:

<!DOCTYPE html>
<html>
<head>
	<title>Smiley</title>
	<script type="text/javascript">
	function draw(){
		var canvas=document.getElementById("myCanvas");
		var context=canvas.getContext("2d");
		//1. draw a triangle (hat)
		context.beginPath();
		context.strokeStyle="rgb(0,0,255)";
		context.fillStyle="#00FF00";
		context.lineWidth=5;
		context.moveTo(200,10);
		context.lineTo(250,50);
		context.lineTo(150,50);
		context.closePath();
		context.fill();
		context.stroke();
		//2. draw a circle (face)
		context.beginPath();
		context.strokeStyle="Aquamarine";
		context.lineWidth =10;
		context.moveTo(300,200);
		context.arc(200,200,100,0,2*Math.PI,true);
		context.stroke();
		//3. draw an arc (smile)
		context.moveTo(250,200);
		context.arc(200,200,50,0,Math.PI,false);
		context.stroke();
		//4. Draw curves (bow tie)
		context.beginPath();
		context.strokeStyle="red";
		context.lineWidth =5;
		context.moveTo(100,350);
		context.quadraticCurveTo(150,300,200,350);
		context.quadraticCurveTo(250,400,300,350);
		context.stroke();
	}
	</script>
</head>
<body onload="draw()">
	<canvas id="myCanvas" width="400" height="400" style="border:1px solid">
	</canvas>
</body>
</html>

To draw a line, we use the moveTo(x,y) method to define a starting point for the line. The lineTo(x,y) method draws the ending point for a line. If we draw subsequent lineTo’s, without a moveTo, the line will always follow from the previous point drawn.

The beginPath() method starts a new path and allows for a specific style to be applied to that path. The closePath() method, as the name implies, closes it, connecting the last point with the first one. The fill() method applies the fillStyle, and the stroke() method the strokeStyle.

To draw a circle, we use the arc() method, which has the following parameters:

  • center x (pixels), center y (pixels), radius (pixels), start angle (radians), end angle (radians), counterclockwise (boolean)

The formula to convert degrees to radians is:
rad = deg * Math.PI/180

So a circle is defined using a start angle of 0 and an end angle of Math.PI*2, as in the exercise:

context.arc(200,200,100,0,2*Math.PI,true);

To draw a semi-circle (for the “smile”), we used simple Math.PI.

To draw a curve, we use a quadratic curve. An explanation (and figure) about a quadratic curve, from Mozilla:

The difference between these can best be described using the image on the right. A quadratic Bézier curve has a start and an end point (blue dots) and just one control point (red dot) while a cubic Bézier curve uses two control points.

The parameters of the quadraticCurveTo method are the following:

  • control point x, control point y, final x, final y

Regarding color, we can use different color syntaxes. JavaScript uses CSS conventions. Red, for example, can be achieved in the following way:

  • “rgb(255,0,0)”
  • “#FF0000”
  • “red”

More on CSS color names (and codes):

http://www.w3schools.com/cssref/css_colornames.asp

The resulting drawing from the exercise:

Link: http://mlab.taik.fi/mediacode/coursefiles/course_2011_10/3-paths_drawing.html

Advertisements

One thought on “JS exercise 3 – Paths

  1. Pingback: JS exercise, day 6 – Smiley revisited, in Paper.JS | Software Studies for Media Designers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s