HTML5 Game - Stroke a rectangle

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Rectangle Methods

Description

Stroke a rectangle

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <script type = "text/javascript">
  function draw(){/*from   w ww  . j  av a 2s .c  o  m*/
    let canvas = document.getElementById("surface");
    if (canvas.getContext){
      let con = canvas.getContext('2d');
      con.fillStyle = "rgb(255, 255, 0)";
      con.fillRect(40, 140, 150, 50);
      con.strokeStyle = "#FF0000";
      con.lineWidth = "5";
      con.strokeRect(60, 100, 100, 100);
    }
  }
  </script>
</head>
<body onload = "draw()">
  <h1>Basic Canvas Demo</h1>
  <canvas id = "surface"
          width = "200"
          height = "200">
    <p>Your browser does not support the canvas tag...</p>
  </canvas>
</body>
</html>

Related Topic