HTML canvas fillStyle Property

HTMLWeb DevelopmentFront End Technology

The fillStyle() property of the HTML canvas is used to set the color or gradient or pattern for the drawing. The default is #000000. The <canvas> element allows you to draw graphics on a web page using JavaScript. Every canvas has two elements that describes the height and width of the canvas i.e. height and width respectively.

Following is the syntax −


Above, the values, include −

  • color: The drawing’s fill color, which is a CSS color.
  • gradient: Linear or radial gradient object to fill the drawing
  • pattern: The pattern object to fill the drawing.

Let us now see an example to implement the fillStyle() property of canvas −


 Live Demo

<!DOCTYPE html>
<canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;">
   var c = document.getElementById("newCanvas");
   var ctx = c.getContext("2d");
   var newGrad =ctx.createLinearGradient(0, 0, 130, 0);
   newGrad.addColorStop(0, "blue");
   newGrad.addColorStop(0.8, "green");
   ctx.fillStyle = newGrad;
   ctx.fillRect(0, 0, 500, 350);


Updated on 12-Jun-2020 07:04:44