How to alter the line thickness when drawing the outline of a path or rectangle on an HTML 5 Canvas element.

We are going to show a property that we had not yet explained about the canvas elements, which is used to modify the thickness of the line when we draw an outline of a path or the outline of a rectangle. Lines by default are always one pixel thick, but this is something that can be set dynamically before drawing.

All we’re going to learn again in this article is the lineWidth property, which belongs to the canvas context. This property supports a numeric value that can be an integer or even a real number, with decimal places. The line width will be the number of pixels that is placed in the lineWidth property.

ctx.lineWidth = 2; //This sets a line two pixels wide

The thickness of a line is placed relative to the center of the path. That is, to explain it with an example so that it can be understood well, let’s imagine a circular path. If we outline that path with a 10px line, the line that would be placed would be neither all inside nor all outside the path, but in the middle. In practice there would be 5 pixels (half the thickness) outside the path and 5 inside.

In the event that a line does not occupy the entire space of a full pixel, a kind of blurring of the color of the line that we are drawing is created. For example, consider a line 1 pixel thick. As it is drawn in the center of the path, in this case there is half a pixel outside of the path and half inside, so you will actually see a line two pixels thick, but blurred on both sides.

In the next image you can see a drawing scheme of the canvas line.

In red we have represented the route of the path. Then you can see a line of 1 pixel and another line of 5 pixels. You can see both lines unfold in the middle of the path. In the case of the 1 pixel line it actually occupies 2 pixels, but on both sides it is blurred. The 5-pixel line has 2 pixels on each side of the solid blue color, and an additional pixel on each side of the dim color.

Example of drawing on canvas with different line thicknesses

Now we can see an example of a drawing, in which we have painted a path and we can choose different line thicknesses, to get an idea of ​​the effect that is achieved with each of them.

Can .

In addition to the line itself, we’ve placed a 2×2 pixel rectangle in the center where the path would go through. This point will allow us to see that the thickness of the line is divided on both sides of the path.

To choose the possible thicknesses for the line we have placed a form SELECT field.

You can see in the SELECT that we have an onchange event that calls a function that will draw the path with a line width, each time the width that we have selected in the field changes.

Now we can see the function that is used to make this drawing with variable line thickness.

function drawPath(){ var ctx = loadCanvasContext(‘micanvas’); if(ctx){ //clear the content of the canvas ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); //we define the thickness of the line ctx.lineWidth = document.grosor.valorgrosor.selectedIndex+1; //we define the color of the line ctx.strokeStyle=”#116″; //begin the path ctx.beginPath(); ctx.moveTo(50,15); ctx.lineTo(75,15); ctx.lineTo(75,75); ctx.lineTo(50,135); ctx.lineTo(25,75); ctx.lineTo(25,15); ctx.closePath(); //we paint the outline of the path ctx.stroke(); //draw the first point of the previous path ctx.fillStyle=”#ff8800″; ctx.fillRect(49,14,2,2); } }

As you can see, the lineWidth property is used, to which we assign a value by accessing the index of the form’s SELECT field that we saw earlier.

The exercise really does not have much more to explain, that we do not know if we have followed the .

The full code can be seen below.

Canvas with line weights

Your browser does not support canvas.

Can .