# How to convert a bitmap image into a line drawing

This tutorial explains how to convert a bitmap image into a line drawing (or how to trace an image) using Adobe Illustrator. There is no video available for this tutorial, but you can download the PDF instructions here.

This tutorial explains how to draw quadratic curves on the HTML canvas. We can use the quadraticCurveTo() method to draw a quadratic curve on the canvas.

The quadratic curve is defined by three things: the context point, the control point, and the ending point. These curves can also be styled using the lineWidth, stroke style and lineCap properties just like regular lines.

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

```<!DOCTYPE html> <html> <head> <title>Quadratic curves</title> <style> #myCanvas{ background-color: white; border: 1px solid black; } </style>   </head> <body> <script> function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.moveTo(50,50); ctx.lineTo(300,50); ctx.quadraticCurveTo(300,100,350,100); // (control point x, control point y, x, y) ctx.lineTo(350,200); ctx.stroke(); } window.onload = draw; </script>   <canvas id="myCanvas" width="500" height="350"> </body> </html>```

# Drawing arcs using the arcTo method

This tutorial explains how to draw arcs using the arcTo method. You will learn how to draw arcs and join arcs to other lines on the canvas.

This is what the arc attached to lines will look like:

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

```<!DOCTYPE html> <html> <head> <title>The arcTo method</title> <style> #myCanvas{ background-color: white; border: 1px solid black; } </style>   </head> <body> <script> function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.moveTo(50,50); ctx.lineTo(200,50); ctx.arcTo(250,50,250,100,50); // x1, y1, x2, y2, radius ctx.lineTo(250,200); ctx.stroke(); } window.onload = draw; </script>   <canvas id="myCanvas" width="500" height="350"> </body> </html>```

# Clipping shapes on the canvas

This tutorial will explain how to clip shapes on the canvas. The clipped shape example in the video will look like this:

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

```<!DOCTYPE html> <html> <head> <title>Clipping shapes</title> <style> #myCanvas{ background-color: white; border: 1px solid black; } </style>   </head> <body> <script> function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.rect(50, 50, 100, 100) // x, y, width, height // we will clip one rectangle with the other ctx.clip(); ctx.rect(0, 0, 100, 100) ctx.stroke(); } window.onload = draw; </script>   <canvas id="myCanvas" width="200" height="200"> </body> </html>```

Next tutorial: Drawing arcs and circles on the canvas

# Drawing paths on the canvas

This tutorial explains how to draw paths on the canvas. Paths can be used to build shapes by creating lines, filling the path, and filling the background with a colour, as seen in the example below.

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

```<!DOCTYPE html> <html> <head> <title>Drawing paths</title> <style> #myCanvas{ background-color: white; border: 1px solid black; } </style>   </head> <body> <script> function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.beginPath(); // this will reset the current default path ctx.moveTo(50,50); // x, y coordinates of start of line ctx.lineTo(250,50); // creates new line to these x, y coordinates ctx.lineTo(250,150); // creates another line to these x, y coordinates ctx.lineTo(50,150); ctx.fill(); ctx.closePath(); // this will close the path to complete the rectangle (adds the last line on the left side of rectangle) ctx.stroke(); // strokes the current path alert(ctx.isPointInPath(75,75)); // returns a true/false value indicating whether the specified point is within a path } window.onload = draw; </script>   <canvas id="myCanvas" width="500" height="350"> </body> </html>```

Next tutorial: Clipping shapes on the canvas

# Joining lines on the canvas

This tutorial explains how to join lines on the canvas. The lines that we will join in this tutorial will end up looking like this:

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

```<!DOCTYPE html> <html> <head> <title>Joining lines</title> <style> #myCanvas{ background-color: white; border: 1px solid black; } </style>   </head> <body> <script> function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.lineWidth = 20; ctx.lineCap = "butt"; // options are: square, round, butt ctx.lineJoin = "round"; // options are: round, bevel, miter //ctx.miterLimit = 3; //ctx.setLineDash([20,10]); //adds dashes -length of dash,length of gap between dash //ctx.lineDashOffset = 20;   ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(150,250); ctx.lineTo(250,50); ctx.lineTo(150,50); ctx.strokeStyle="#FF0000"; ctx.stroke(); //ctx.fill(); will add a fill } window.onload = draw; </script>   <canvas id="myCanvas" width="300" height="300"> </body> </html>```

Next tutorial: Drawing paths on the canvas

# Styling lines on the canvas

In the previous tutorial we looked at how to draw lines on the canvas. In this tutorial we will style lines on the canvas by changing the following properties:

• colour
• width
• line cap (shape on the ends of a line) for a line on the canvas

The line that we will create will look like this:

Watch the video below and then scroll down the page to see the sample code.

Here is the sample code:

```<!DOCTYPE html> <html> <title>Styling lines on the canvas</title> <style> #myCanvas{ background-color:#FFFFFF; border: 1px solid #000000; } </style> </head>   <body> <script> function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.lineWidth=20; // specify the width of the line ctx.lineCap="round"; // lineCap options are square, round, butt ctx.moveTo(50,50); // x,y positions - where the line begins ctx.lineTo(250,250); // x,y positions - where the line ends ctx.strokeStyle="#0000FF"; // specify the colour of the line ctx.stroke(); // draw the line } window.onload=draw; // run the draw function when the page loads </script> <canvas id="myCanvas" width="300" height="300"> </body> </html>```

Next tutorial: Joining lines on the canvas

# Drawing arcs and circles with the HTML5 canvas

This tutorial explains how to use the HTML5 canvas and JavaScript to draw circles and arcs on the canvas. The code below shows how to draw a full circle, but you can easily modify it to draw arcs (the circle is made up of arcs).

In this example, the circle will be inside a canvas with a black border and will look like this:

Watch the video below and then scroll down to see the sample code.

Refer to the comments in the code to find out what is happening on each line of the code.

```<!DOCTYPE html> <html> <head> <title>Arcs and circles</title> <style> #myCanvas{ background-color: white; border: 1px solid black; } </style>   </head> <body> <script> function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.arc(150,150,100,0,Math.PI*2,false); // x, y, radius, startAngle, endAngle, true/false (for clockwise and anticlockwise) // Math.PI gives semi-circle // Math.PI*2 gives full circle // Numbers can also be used instead of Math.P eg. 6.28 // try using numbers less than 6.28 to see how you get less of a circle ctx.stroke(); //try doing semi-circle that is (flipped over) by chaning false to true   } window.onload = draw; </script>   <canvas id="myCanvas" width="500" height="350"> </body> </html>```

Next tutorial: Drawing arcs using the arcTo method

# Drawing lines using the HTML5 canvas

This tutorial explains how to use the HTML5 canvas element to draw lines. The line that will be drawn will be inside a canvas with a  grey border. It will look like this:

Watch the video below to see how to draw lines and then scroll down to see the sample code.

Here is the sample code:

```<!DOCTYPE html> <html> <head> <title>Drawing lines on canvas</title> <style> #myCanvas{ background-color: white; border: 1px solid black; } </style>   </head> <body> <script> function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.strokeStyle="#FF0000"; ctx.stroke(); } window.onload = draw; </script>   <canvas id="myCanvas" width="200" height="100"> </body> </html>```

Next tutorial: Styling lines on the canvas

# Using the HTML5 canvas to draw shapes

The code below shows how to use the HTML5 canvas and JavaScript in a webpage to draw objects. In this example, the object will be a simple rectangle shape inside a canvas with a grey border. The rectangle will be filled with red and have a blue border. It will look like this:

You can use the canvas for drawings, animations, and even games. Watch the video below to see how to create a canvas and draw a rectangle shape, then scroll down to see the code.

Check out the sample code below. You can view all the different HTML colour codes that you can use here.

```<!DOCTYPE html> <html> <head> <title>Simple canvas with rectangle drawing</title> <style> #myCanvas{ background-color: white; border: 1px solid black; } </style>   <script> function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.fillStyle = "red"; ctx.strokeStyle = "blue"; ctx.fillRect(0,0,150,75); ctx.strokeRect(0,0,150,75); } window.onload=draw; </script> </head> <body> <canvas id="myCanvas" width="200" height="100"> </body> </html>```

Next tutorial: Drawing lines using the HTML5 canvas element