This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

fill

Summary

Fills all the subpaths of the intended path, using fillStyle, and using the non-zero winding number rule. Open subpaths must be implicitly closed when being filled (without affecting the actual subpaths).

Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax

var object = object.fill(path);

Parameters

path

Data-type
DOM Node

(Optional)

The path to be filled.

Return Value

Returns an object of type DOM NodeDOM Node

Type: HRESULT

If this method succeeds, it returns S_OK. Otherwise, it returns an HRESULT error code.

Examples

This example creates a 30 x 100 rectangle on the canvas, sets a solid color fill style, and fills the rectangle.

<canvas id="myCanvas" width="300" height="150" style="border:1px solid blue;"></canvas>
<p>. . .</p>
<script>
var can = document.getElementById("myCanvas");
var ctxt = can.getContext("2d");
ctxt.rect(20, 20, 50, 120);
ctxt.fillStyle = "cyan";
ctxt.fill();
</script>

Related specifications

W3C HTML Canvas 2D Context
W3C Candidate Recommendation

Attributions