Open In App
Related Articles

HTML canvas fill() Method

Improve Article
Improve
Save Article
Save
Like Article
Like

The canvas fill() Method is used to fill the current drawing path. The default color of the canvas fill() method is black.

Syntax: 

context.fill()

Example-1:

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas fill() Method
    </title>
</head>
  
<body>
    <canvas id="GFG"
            width="500"
            height="300">
  </canvas>
  
    <script>
        var x =
            document.getElementById("GFG");
        var context =
            x.getContext("2d");
        context.rect(50, 50, 350, 200);
        context.fill();
        context.stroke();
    </script>
  
</body>
  
</html>

Output: 

fill_canvas

Example-2: 

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas fill() Method
    </title>
</head>
  
<body>
    <canvas id="GFG"
            width="500"
            height="300">
  </canvas>
  
    <script>
        var x = 
            document.getElementById("GFG");
        var context = 
            x.getContext("2d");
        context.rect(50, 50, 350, 200);
        context.fillStyle = "green";
        context.fill();
        context.stroke();
    </script>
  
</body>
  
</html>

Output: 

canvas_fill

Supported Browsers:

  • Google Chrome
  • Internet Explorer 9.0
  • Firefox
  • Safari
  • Opera

Last Updated : 09 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials