HTML5 Game - Drawing a Triangle

  1. HOME
  2. HTML5 Game
  3. Canvas Shape
  4. Triangle

Description

Drawing a Triangle

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>

<head>
    <style>
        #canvas {//from   w  w w . j a  v a2 s . c o m
            border: 1px solid #03F;
            background: #CFC;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script>
        let canvas = document.getElementById('canvas').getContext('2d');

        canvas.beginPath();
        canvas.moveTo(10, 10);
        canvas.lineTo(630, 470); //diagonal line 
        canvas.lineTo(10, 470); //bottom line 
        canvas.lineTo(10, 10); //left line 
        canvas.closePath();

        canvas.strokeStyle = '#000';
        canvas.lineWidth = 3;

        canvas.fillStyle = '#ccc';
        canvas.fill();

        canvas.stroke();
    </script>

</body>

</html>

Related Topic