HTML5 Game - Drawing Complex Shapes via lines

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

Description

Drawing Complex Shapes via lines

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <script type = "text/javascript">
  function draw(){//from   w  ww  .  ja  v a2s .  c  o m
    let drawing = document.getElementById("drawing");
    let con = drawing.getContext("2d");
    con.beginPath();
      con.strokeStyle = "red";
      con.fillStyle = "blue";
      con.lineWidth = "5";
      con.moveTo(100, 100);
      con.lineTo(200, 200);
      con.lineTo(200, 100);
      con.lineTo(100, 100);
    con.closePath();
    con.stroke();
    con.fill();
  }
  </script>
</head>
<body onload = "draw()">
  <h1>Path Demo</h1>

  <canvas id = "drawing"
    height = "400"
    width = "400">
    <p>Canvas not supported</p>
  </canvas>

</body>
</html>

Related Topic