HTML5 Game - Canvas Drawing Lines

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Line

Description

Drawing Lines

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>

<head>
    <script>
        //Draws lines on a canvas.
        window.onload = function() {
            canvas = document.getElementById("canvasArea");
            context = canvas.getContext("2d");

            //VARIABLES.
            let width = 60;
            let height = 75;
            let gap = 50;/*from   ww  w .  ja  v  a  2 s  .com*/

            //ATTRIBUTES of lines.
            context.strokeStyle = "blue";
            context.lineWidth = 18;
            context.shadowOffsetX = 4;
            context.shadowOffsetY = 4;
            context.shadowBlur = 7;
            context.shadowColor = "gray";

            //       xStart yStart cap
            //       ------ ------ -------
            drawLine(25, 25, "butt");
            drawLine(25, 75, "square");
            drawLine(25, 125, "round");

            //       xStart                 yStart join
            //       ---------------------  ------ -------
            drawJoin(175 + (0 * gap) + (0 * width), 120, "miter");
            drawJoin(175 + (1 * gap) + (1 * width), 120, "bevel");
            drawJoin(175 + (2 * gap) + (2 * width), 120, "round");

            function drawLine(xStart, yStart, cap) {
                context.lineCap = cap;

                //DRAW lines.
                context.beginPath();
                context.moveTo(xStart, yStart);
                context.lineTo(xStart + 1.5 * width, yStart);
                context.stroke();
            }

            function drawJoin(xStart, yStart, join) {
                context.lineCap = "round";

                context.beginPath();
                context.moveTo(xStart, yStart);
                context.lineTo(xStart + (width / 2), yStart - height);
                context.lineTo(xStart + width, yStart);
                context.lineJoin = join;
                context.stroke();
            }
        }
    </script>
</head>

<body>

    <div style="width:500px;   height:160px;
                  margin:0 auto; padding:5px;">
        <canvas id="canvasArea" width="500" height="160" style="border:2px solid black">
            You're browser doesn't currently support HTML5 Canvas.
        </canvas>
    </div>
</body>

</html>

Related Topic