HTML5 Game - Set line style and fill style for rectangle

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Colour and Style

Description

Set line style and fill style for rectangle

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <script type = "text/javascript">
  function draw(){/*from  www  . j  av  a  2  s. c  o m*/
    let drawing = document.getElementById("drawing");
    let con = drawing.getContext("2d");

    con.fillStyle = "red";
    con.strokeStyle = "green";
    con.lineWidth = "5";

    con.fillRect(10, 10, 180, 80);
    con.strokeRect(10, 100, 180, 80);

  }
  </script>
</head>

<body onload = "draw()">
  <h1>Rectangle Demo</h1>
  <canvas id = "drawing"
          height = "200"
          width = "200" >
    <p>Canvas not supported</p>
  </canvas>
</body>
</html>

Related Topic