HTML5 Canvas Tutorials - Specifying line width on canvas

Line style

You can control the line styles on canvas using the lineWidth, lineCap and lineJoin style. All three attributes apply whether you are drawing a set of lines, figures, or text.

Line Width

You can control the line width by setting the 'lineWidth' attribute to the desired size. The size is in pixels. For example, if you say lineWidth = 3.0, the width of the lines you draw henceforth will be 3 pixels wide unless you specify otherwise later.

Line width also applies to text. When you are dealing with text, be careful not to confuse line width with font size. Font size deals with the height and width of the characters as a whole. Line width influences individual strokes that make up the character.

HTML Code

<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
ctx.textBaseline = "top";

// Draw a rectangle and text with lineWidth 1.0
ctx.lineWidth = 1.0;
ctx.strokeRect( 100,20,100,30)
ctx.font="40px verdana";
ctx.strokeText("Believe", 300,20);

// Now, increase the lineWidth and notice the difference in the lines
ctx.lineWidth=3.0;
ctx.strokeRect( 100,60,100,30);
ctx.strokeText("Believe", 300,60);

}
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas><br>
</body>
</html>

Try Code