Drawing

Next ❯Rectangle

Anything on canvas can be drawn are either outline shapes (empty) or filled shapes or both

  • turned_in_notDrawing Related Methods
    • stroke()
    • fill()


stroke( )

Used to draw only the outline of defined paths or shapes on canvas, default stroke color is black

  • Must be declared after the defined paths/shapes to draw it on canvas
  • stroke means to outline

Syntax

ctx.stroke()
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.rect(20,20,100,50);
ctx.stroke();
strokesubject
strokeclose
<!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");

  ctx.rect(20,20,100,50);
  ctx.stroke();
</script>
</body>
</html>
`


fill( )

Used to draw only the filled defined paths or shapes on canvas, default fill color is black

  • If your path is open then it will fill the area covered by joining the first & last path points with a straight line
  • Must be declared after the defined paths/shapes to draw it on canvas

Syntax

ctx.fill()
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.rect(20,20,100,50);
ctx.fill();
fillsubject
fillclose
<!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");

  ctx.rect(20,20,100,50);
  ctx.fill();
</script>
</body>
</html>


  • Rectangle
❮ Prev Canvas Coordinates
Next ❯Rectangle
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯