HTML References
HTML - Tags Reference
HTML - Attributes Reference
HTML - Events Reference
HTML - Fonts Reference
HTML - ASCII Codes
ASCII Table Lookup
HTML - Color Names
HTML - Entities
HTML - Fonts Ref
HTML - Events Ref
MIME Media Types
HTML - URL Encoding
Language ISO Codes
HTML - Character Encodings
HTML - Deprecated Tags

HTML canvas fill() Method

HTML Web Development Front End Technology

The fill() method in HTML canvas is used to fill the current drawing path. The default is black. 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−

ctx.fill();

Let us now see an example to implement the fill() method of canvas −

Example

Live Demo

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="450" height="250" style="border:2px solid blue;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.rect(50, 60, 300, 200);
   ctx.fillStyle = "green";
   ctx.fill();
</script>
</body>
</html>