HTML5 Game - Draw a triangle with lines

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

Description

Draw a triangle with lines

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lines</title>

  <style>
canvas {/*w  w w  .  java 2s. c o  m*/
  border: 1px dashed black;
}
  </style>

  <script>
 
window.onload = function() {
  let canvas = document.getElementById("drawingCanvas");
  let context = canvas.getContext("2d");

  context.moveTo(250,50);
  context.lineTo(50,250);
  context.lineTo(450,250);
  //context.lineTo(250,50);
  context.closePath();

  // Paint the inside.
  context.fillStyle = "blue";
  context.fill();

  // Draw the outline.
  context.lineWidth = 10;
  context.strokeStyle = "red";
  context.stroke();
};

  </script>
</head>

<body>
  <canvas id="drawingCanvas" width="500" height="300"></canvas>
</body>
</html>

Related Topic