Try it Yourself: Canvas Drawing

Canvas Drawing

<!DOCTYPE html>
<html>
<body>

<canvas id="shapes" width="400" height="200"></canvas>

<script>
  const canvas = document.getElementById("shapes");
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = "orange";
  ctx.fillRect(20, 20, 100, 80);

  ctx.strokeStyle = "black";
  ctx.lineWidth = 4;
  ctx.strokeRect(150, 20, 100, 80);

  ctx.clearRect(40, 40, 30, 30);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<canvas id="shapes" width="400" height="200"></canvas>

<script>
  const canvas = document.getElementById("shapes");
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = "orange";
  ctx.fillRect(20, 20, 100, 80);

  ctx.strokeStyle = "black";
  ctx.lineWidth = 4;
  ctx.strokeRect(150, 20, 100, 80);

  ctx.clearRect(40, 40, 30, 30);
</script>

</body>
</html>