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

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×