Line width

In this chapter you will learn:

  1. How to control line width

Control line width

<!DOCTYPE HTML><!--   ja v  a  2s  .  c o  m-->
<html>
<head>
<style>
canvas {
      border: thin solid black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="500"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.lineWidth = 2;
            ctx.strokeRect(30, 30, 50, 50);
            ctx.lineWidth = 4;
            ctx.strokeRect(70, 30, 50, 50);
            ctx.lineWidth = 6;
            ctx.strokeRect(130, 30, 50, 50);
            ctx.strokeRect(190, 30, 50, 50);
      </script>
</body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter:

  1. How to control line join style
Home » Javascript Tutorial » Canvas
Canvas tag
Canvas Context
Rectangle
Rectangle clear
Drawing State
Drawing state restore
Line width
Line Join Style
Line cap settings
Gradients
Linear Gradient
Radial Gradient
Path
Arcs
Two types of curve
Quadratic Bezier Curves
Cubic Bezier Curves
Clip
Text
Shadow
Transparency
Stoke style