Draw has a direct line with Canvas

Draw has a line, select color, thickness, function in parts with a few examples.

This is not expected, but the line drawing function can provide complex graphical effects, as shown at the bottom of the page. This is due to the fact that the function is divided into several separate instructions to determine the starting and starting point, color, thickness ...

To demonstrate this feature, we begin by declaring the <canvas> tag, as explained in the first article in this series, "Start with canvas." 

<canvas id="moncanevas" width="400" height="150">
  Canvas requiert un navigateur moderne: Chrome, Firefox, Edge, Opera, Safari.
</canvas>

Defines a line with two statements, moveTo and lineTo

The line is divided into two functions (for example, BASIC): moveTo (x, y) determines the X and Y coordinates of the current point, which serves as the starting point for drawing the line.
And lineTo (x, y) specifies the endpoint to create a straight path between the current point and a new point whose coordinates are the X and Y parameters.
The string is not actually routed until the stroke () function is called.
When you want to draw a new line that is not a continuation of the previous outline, you start with the beginPath () function.
Therefore, at least four instructions are required to draw a line. Example:

canvas = document.getElementById("moncanevas"); 
if (canvas.getContext)
{    
    context = canvas.getContext('2d'); 
}
function drawLine()
{
 context.beginPath();
 context.moveTo(20,100);
 context.lineTo(200,10);
 context.stroke(); 
}
Canvas requires a modern browser: Chrome, Firefox, IE9, Safari.

Color specified by strokeStyle attribute

The path color is not selected using the parameter, but in general for all paths that follow it. The value of the strokeStyle attribute will be the color of all new paths until it is reassigned.
But this does not apply to the content of complete shapes, such as, for example, a rectangle, their color depends on another fillStyle attribute.

The color values assigned to these attributes are the same as for the CSS code, for example, blue, # 008, # 000080, rgba (0,0,128,1).

context.strokeStyle='green'; 
context.fillStyle='rgba (0,0,128,1)';

Thus, the previously defined drawLine function is supplemented with a color attribute:

function drawLine()
{
 context.beginPath();
 context.strokeStyle='green';
 context.moveTo(20,100);
 context.lineTo(200,10);
 context.stroke(); 
}

Important: To define line outlines for other colors, add beginPath () before creating a new line. Even individual segments are considered part of the same line before the new instance of the beginPath function.

Canvas requires a modern browser: Chrome, Firefox, IE9, Safari.

Four formats are possible to define the color...

And assign them strokeStyle or fillStyle (along with textures, as we will see below). These values are placed in quotation marks and can be the name of the color, either its hexadecimal code as red/green/blue, or a decimal code of three or four values ​ ​ with an opacity level. 

ctx.fillStyle = "white";
ctx.fillStyle = "#FFFFFF";
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillStyle = "rgba(128,128,128,0.5)";

The fourth attribute rgba (a = alpha) defines opacity, which ranges from 0.0 to 1, where 0 is full transparency and 1 is total opacity, which always happens for the simple rgb format. Therefore, the average transparency is 0.5.

The lineWidth attribute defines the line width

You can determine the thickness of a line by using the lineWidth attribute, whose default unit is a pixel. Therefore, one does not need to be given if the thickness is expressed in pixels, only an integer value is given. 

function drawLine()
{
 context.strokeStyle='green';
 context.lineWidth=4; 
 context.moveTo(20,100);
 context.lineTo(200,10);
 context.stroke(); 
}
Canvas requires a modern browser: Chrome, Firefox, IE9, Safari.

Line ends can be round or square

When it has more than two pixels thick, you can make the ends of the line round or square. It cannot be shaped like an arrow (no more than in SVG), which would be useful for graphs.
To modify a shape, you assign a lineCap attribute with a value of round, square, or butt, which is the default value.
If the line has no end, its length does not increase by the length of the ends, which is equal to the line width defined by lineWidth.

Example: context.lineCap = "round";

In the demo, we will try three values ​ ​ in a row: butt in green, square in blue, then round in red.

Canvas requires a modern browser: Chrome, Firefox, IE9, Safari.

It can be seen that the tips of the line increase its length in proportion to its width.

Full source code:

function drawLine4()
{
  var context = document.getElementById("canvas4").getContext('2d');
  context.lineWidth='8';
  context.strokeStyle='green';
  context.beginPath();
  context.moveTo(20,20);
  context.lineTo(200,20);
  context.stroke();
  context.beginPath();
  context.strokeStyle='#800';
  context.lineCap='square';
  context.moveTo(20,50);
  context.lineTo(200,50);
  context.stroke();
  context.strokeStyle='rgb(128,0,0)';
  context.lineCap='round';
  context.beginPath();
  context.moveTo(20,80);
  context.lineTo(200,80);
  context.stroke();
}

drawLine4();
The next step is to draw a curve.

Sample application