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



Linewidth property in html5 canvas

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

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

Sample Output for lineWidth property in HTML5 Canvas:

linewidth property in HTML5 canvas Output

  1. The canvas rectangle with red color border.
  2. Draw a rectangle with a line width of 15 pixels.

Browser Support for lineWidth property in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Related Searches to lineWidth Property in HTML5 Canvas