Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Canvas fill() Method

❮ Canvas Reference

Example

Draw a 150*100 pixels rectangle, and fill it with the color red:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "red";
ctx.fill();
Try it Yourself »

Description

The fill() method fills the current path.

The default fillStyle is #000000 (solid black).

The fill() method will close the path, like closePath(), before filling it.

See Also:

The fillStyle Property

The beginPath() Method (Start a new path)

The closePath() Method (Close current path)

The moveTo() Method (Move the path to a point)

The lineTo() Method (Add a line to the path)

The stroke() Method (Draw current path)



Syntax

context.fill()

Parameters

NONE

Syntax

NONE

Browser Support

The <canvas> element is an HTML5 standard (2014).

fill() is supported in all modern browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11

❮ Canvas Reference