Canvas Drawing State

Drawing operations are configured by the drawing state.

The following code uses the lineWidth property.

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<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 this demo.

The following table shows the basic drawing state properties.

Name	Description	Default
fillStyle	the style used for filled shapes	black
lineJoin	the style used when lines meet in a shape	miter
lineWidth	the width of lines	1.0
strokeStyle	Gets or sets the style used for lines	black