HTML5 Game - Setting the Canvas Drawing State

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Drawing State

Introduction

Canvas Drawing operations are configured by the drawing state.

It is a set of properties that specify everything from line width to fill color.

When we draw a shape, the current settings in the drawing state are used.

The following code uses the lineWIdth property, which is part of the drawing state.

It sets the width of lines used for shapes such as those produced by the strokeRect method.

The following code sets the drawing state before performing an operation.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black; margin: 4px}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500" height="70">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <script>
            let ctx = document.getElementById("canvas").getContext("2d");
            //from www  . j  a  va2s . c o m
            ctx.lineWidth = 2;
            ctx.strokeRect(10, 10, 50, 50);
            ctx.lineWidth = 4;
            ctx.strokeRect(70, 10, 50, 50);
            ctx.lineWidth = 6;
            ctx.strokeRect(130, 10, 50, 50);
        </script>
    </body>
</html>

When using the strokeRect method, the current value of the lineWidth property is used to draw the rectangle.

In the example above, it sets the property value to 2, 4, and finally 6 pixels.

It makes the lines of the rectangles thicker.

The basic drawing state properties

The following table shows the basic drawing state properties.

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

Related Topic