fill() Method - Javascript Canvas Reference

Javascript examples for Canvas Reference:fill

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. fill

Description

The fill() method fills the current path. The default color is black.

You can set the fill style with the fillStyle property.

JavaScript syntax 

context.fill();

Example

The following code shows how to Draw a 150*100 pixels rectangle, and fill it with the color red:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="250" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.font = "20px Georgia";
ctx.fillText("Hello World!", 10, 50);

ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;/*from ww  w  . j  a v  a 2 s . co  m*/
ctx.fillText("test", 10, 90);

</script>

</body>
</html>

Related Tutorials