Rectangle

To draw rectangle or square shape(s) on canvas

  • turned_in_notRectangle Related Methods
    • rect()
    • strokeRect()
    • fillRect()
    • clearRect()
  • For square set width = height

rect( )

Used to define a rectangle, to draw it on canvas, you have to use additional method stroke() or fill()

Syntax

ctx.rect(x, y, width, height)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.rect(30,15,140,70);
ctx.stroke();
rectsubject
rectclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  /* Now we code to draw on canvas */
  ctx.rect(30,15,140,70);
  ctx.stroke();
</script>
</body>
</html>


strokeRect( )

Used to draw a stroke rectangle on canvas, default stroke color is black

Syntax

ctx.strokeRect(x, y, width, height)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.strokeRect(30,15,140,70);
strokeRectsubject
strokeRectclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  /* Now we code to draw on canvas */
  ctx.strokeRect(30,15,140,70);
</script>
</body>
</html>


fillRect( )

Used to draw a filled rectangle on canvas, default fill color is black

Syntax

ctx.fillRect(x, y, width, height)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.fillStyle="red";  // Used to fill the color
ctx.fillRect(30,15,140,70);
fillRectsubject
fillRectclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  /* Now we code to draw on canvas */
  ctx.fillStyle="red";
  ctx.fillRect(30,15,140,70);
</script>
</body>
</html>


clearRect( )

Used to clear/erase a rectangular portion on canvas

Syntax

ctx.clearRect(x, y, width, height)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.fillStyle="red";  // Used to fill the color
ctx.fillRect(30,15,140,70);
ctx.clearRect(40,15,70,30);
clearRectsubject
clearRectclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  /* Now we code to draw on canvas */
  ctx.fillStyle="red";
  ctx.fillRect(30,15,140,70);
  ctx.clearRect(40,15,70,30);
</script>
</body>
</html>


  • Arc
❮ Prev Canvas Drawing
Next ❯Arc
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯