Try it Yourself: Canvas Introduction

Canvas Introduction

<!DOCTYPE html>
<html>
<body>

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

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "steelblue";
  ctx.fillRect(20, 20, 150, 100);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

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

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "steelblue";
  ctx.fillRect(20, 20, 150, 100);
</script>

</body>
</html>