close

How to fill the whole canvas with specific color?

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to fill the whole canvas with specific color? in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to fill the whole canvas with specific color ?

  1. How to fill the whole canvas with specific color ?

    fill the whole canvas with specific color If you want to do the background explicitly, you must be certain that you draw behind the current elements on the canvas.

  2. fill the whole canvas with specific color

    fill the whole canvas with specific color If you want to do the background explicitly, you must be certain that you draw behind the current elements on the canvas.

Method 1

If you want to do the background explicitly, you must be certain that you draw behind the current elements on the canvas.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// Add behind elements.
ctx.globalCompositeOperation = 'destination-over'
// Now draw!
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

Method 2

You can change the background of the canvas by doing this:

<head>
    <style>
        canvas {
            background-color: blue;
        }
    </style>
</head>

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment