HTML Reference Manual

HTML tag大全

HTML canvas fill() method

fill() is a Canvas 2The fill() method of Canvas fills the current or existing path based on the current fill style. It uses the non-zero winding or even-odd rule.

HTML canvas Reference Manual

Online Example

Drawing 100*100 pixel square, then fill it with red:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas fill() method usage-Basic Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3">
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20,20,100,100);
ctx.fillStyle="red";
ctx.fill();
</script>　
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9and Firefox, Opera, Chrome, and Safari support fill() method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and Usage

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

Tip:Please use fillStyle property to fill with another color/gradient.

Note:If the path is not closed, the fill() method will add a line from the end point of the path to the starting point to close the path (as shown in closePath() Similarly), then fill the path.

JavaScript Syntax:	context.fill();

HTML canvas Reference Manual

HTML: <template> tag