How Do I Draw a Straight Line in Google Canas

November 29, 2021

The canvas element (new to HTML5) is used to draw 2D graphics into an HTML document. Using Javascript you can draw a wide range of objects into an HTML canvas such as lines, text, images and shapes using several built in functions.

With the ability to draw lines on your canvas you can add a wide variety of functionality to a website such as

graph plotting

Adding a canvas to your HTML document and interacting with it in Javascript

To use Javascript to interact with an HTML canvas, you will first need to add the canvas element into your HTML document like so:

          <canvas            id="testCanvas"            width="200"            height="200">          </canvas>

In this example we give the canvas a fixed width and height to make it easier to keep track of co-ordinates. This canvas will be used throughout the tutorial.

Once the canvas element has been added to your HTML document, you must then acquire a context object from it by retrieving the canvas element and calling the getContext("2d") method.

          var          canvas =          document.getElementById("testCanvas");          var          context = canvas.getContext("2d");

With the context object you can call certain functions that will allow you to draw objects to the canvas.

Drawing straight lines from one point on the canvas to another using the context object

To begin drawing a line on your canvas, you must first begin a new path using the beginPath() method, each time you create a separate line this method should also be called.

context.beginPath();

Once you have started a new path, you must set where the starting point of the path should be using the moveTo() method. This method takes 2 arguments, one for the X coordinate and one for the Y coordinate (both integers).

context.moveTo( x, y );

Now you can specify where the next point in the line should be using the lineTo() method. This method also takes 2 arguments for the X and Y coordinates. You can call this method as many times as you like to create a complex line before actually drawing it.

context.lineTo( x, y );

Once you have called the lineTo() method at least once, you can use the stroke() method to actually draw the line.

Example:

Here we will create a simple line going from one point in the canvas to another:

          var          canvas =          document.getElementById("testCanvas");          var          context = canvas.getContext("2d");              context.beginPath();           context.moveTo(          5,          10          );        context.lineTo(          45,          50          );       context.stroke();

This will draw a line onto the canvas that looks like this:

Drawing paths with multiple lines

As you can call the lineTo() method multiple times when creating a path, you can add multiple lines to a single path, this gives you the ability to draw shapes that can be used for many different purposes.

As an example let's create a triangle within a canvas element using multiple lines in a single path.

var canvas = document.getElementById("testCanvas");       var context = canvas.getContext("2d");              context.beginPath();       //          start          at          point x=70          y=10          context.moveTo(          70,          10          );      //          create          line          from          point x=70          y=10          to          x=120          y=100          context.lineTo(          120,          100          );      //          create          line          from          point x=120          y=100          to          x=10          y=100          context.lineTo(          10,          100          );      //          create          line back          to          beginning          context.lineTo(          70,          10          );      // draw path to canvas       context.stroke();

This will result in a triangle shape like the following:

Creating multiple paths

If you want to create multiple separate paths, you will need to call the beginPath() method again after drawing your initial path in order to reset and create a new path.

As an example let's create another 2 triangle shapes within one canvas element using 2 separate paths.

          var          canvas          =          document.getElementById("testCanvas");          var          context          =          canvas.getContext("2d");          //          create          first          triangle          context.beginPath();          context.moveTo(          70          ,          10          );          context.lineTo(          120          ,          100          );          context.lineTo(          10          ,          100          );          context.lineTo(          70          ,          10          );          context.stroke();          //          create          second          triangle          context.beginPath();          context.moveTo(          100          ,          30          );          context.lineTo(          150          ,          120          );          context.lineTo(          40          ,          120          );          context.lineTo(          100          ,          30          );          context.stroke();

This will result in 2 separate triangle shapes like the following:

Customizing your line width and color

There are several properties of the context object that you can modify in order to customize the appearance of lines. Here you will learn 2 of the most common:

lineWidth

: Used to modify the thickness of each line drawn (default = 1), accepts an integer value.

strokeStyle

: Used to modify the color of a line (or add a gradient or pattern). When used to modify colors you can give any

valid HTML color

as a value.

As an example of these two properties let's create a red triangle with a thickness of 4:

          var          canvas          =          document.getElementById("testCanvas");          var          context          =          canvas.getContext("2d");          context.beginPath();          //          set          line          color          and          width          context.strokeStyle          =          "red";          context.lineWidth          =          4          ;          context.moveTo(          70          ,          10          );          context.lineTo(          120          ,          100          );          context.lineTo(          10          ,          100          );          context.lineTo(          70          ,          10          );          context.stroke();