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

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