HTML Canvas Rectangle set border style and fill style

Description

HTML Canvas Rectangle set border style and fill style

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  // SUMMARY: Draws rectangles on a canvas.
  window.onload = function() {/*w  w w .  ja v  a  2  s .  co  m*/

    canvas = document.getElementById("canvasArea");
    context = canvas.getContext("2d");

    // LAYOUT of first rectangle.
    let xPos = 20;
    let yPos = 20;
    let width = 100;
    let height = 50;

    // DISPLAY rectangles.
    context.fillStyle = "hotpink";
    context.fillRect(xPos, yPos, width, height);
    context.lineWidth = 4;
    context.strokeStyle = "royalblue";
    context.strokeRect(xPos + 130, yPos, width, height);
    context.fillStyle = "darkorange";
    context.fillRect(xPos + 260, yPos, width, height);
    context.clearRect(xPos + 285, yPos + 10, width - 50, height - 20);
  }
</script>
</head>
<body>
  <div style="width: 400px; height: 90px; margin: 0 auto; padding: 5px;">
    <canvas id="canvasArea" width="400" height="90"
      style="border: 2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related