html tutorial - lineWidth Property in HTML5 Canvas - html5 - html code - html form

Learn html - html tutorial - Linewidth property in html5 canvas - html examples - html programs

The lineWidth is a property of <canvas> element in line style.
The lineWidth property returns width of the current line, in pixels.

Syntax for lineWidth property in HTML5 Canvas:

context.lineWidth=”number”;

Property Values for lineWidth property in HTML5 Canvas:

Value	Description
number	numberDefines width of the current line, in pixels

Sample coding for lineWidth property in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy HTML Canvas lineWidth Property</title>
    </head>
    <body>
        <h2>Wikitechy HTML Canvas lineWidth Property</h2>
        <canvas id="wikitechyCanvas" width="200" height="200" 
                style="border:2px solid red;"></canvas>
        <script>
            var lw = document.getElementById("wikitechyCanvas");
            var lwx = lw.getContext("2d");
            lwx.lineWidth = 15;
            lwx.strokeRect(25, 25, 85, 100);
        </script>
    </body>
</html>

Code Explanation for lineWidth property in HTML5 Canvas:

linewidth property in HTML5 canvas Code Explanation

”wikitechyCanvas” is used to define the value id attribute for canvas element.
The getElementById(); method is used to get the canvas element by id attributes with the specified value.
lw.getContext(“2d”) method is returns a two-dimensional drawing context on the canvas.
lwx.lineWidth=15 is used to draw a line with a width of 15 pixel.
lwx.strokeRect(25, 25, 85, 100) method is used to draw a rectangle. Black is the default color of the stroke.