Color

Next ❯Stroke

To color the outline or filled area or both

  • turned_in_notColor Related Properties
    • strokeStyle
    • fillStyle


strokeStyle

Used to set or get the stroke color, default color is black

  • Must be declared before the stroke() or strokeText()or strokeRect()

Syntax - To set stroke color

ctx.strokeStyle=color

Syntax - To get stroke color

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

ctx.rect(20,20,100,50);
ctx.strokeStyle="red";
ctx.stroke();
strokeStylesubject
strokeStyleclose
<!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.strokeStyle="red";
  ctx.stroke();
</script>
</body>
</html>


fillStyle

Used to set or get the fill color, default color is black

  • Must be declared before the fill() or fillText()or fillRect()

Syntax - To set fill color

ctx.fillStyle=color

Syntax - To get fill color

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

ctx.rect(20,20,100,50);
ctx.fillStyle="red";
ctx.fill();
fillStylesubject
fillStyleclose
<!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.fillStyle="red";
  ctx.fill();
</script>
</body>
</html>


  • Stroke
❮ Prev Curve
Next ❯Stroke
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯