1 out of 1 rated this helpful - Rate this topic

fill method

Fills subpaths by using the current fill style.

Syntax

CanvasRenderingContext2D.fill();

Parameters

This method has no parameters.

Return value

This method does not return a value.

Standards information

HTML Canvas 2D Context, Section 9

Examples

The following code example uses the lineTo and closePath methods to create a shape and then fills the shape.

HTML


<html>
<head>
    <title>Canvas fill example</title>
    <script>
        function fillDemo() {
            var canvas = document.getElementById("demo")
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                ctx.beginPath();
                ctx.lineWidth = "3";
                ctx.strokeStyle = "blue";  // This path is blue.
                ctx.fillStyle = "red";    // The fill is red.
                ctx.moveTo(0, 0);
                ctx.lineTo(150, 150);
                ctx.lineTo(200, 150);
                ctx.closePath();
                ctx.fill();
                ctx.stroke();           // Draw it.                      
            }
        }
          </script>
</head>
    <body onload="fillDemo();">
        <canvas id="demo" width="300" height="300">This browser or document mode doesn't support canvas</canvas>
  </body>
</html>

Community Additions

ADD