The CanvasRenderingContext2D.fillStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use inside shapes. The default style is #000 (black).
In this example, we use two for loops to draw a grid of rectangles, each having a different fill color. To achieve this, we use the two variables i and j to generate a unique RGB color for each square, and only modify the red and green values. (The blue channel has a fixed value.) By modifying the channels, you can generate all kinds of palettes.
js
const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");for(let i =0; i <6; i++){for(let j =0; j <6; j++){
ctx.fillStyle =`rgb(
${Math.floor(255-42.5* i)},
${Math.floor(255-42.5* j)},
0)`;
ctx.fillRect(j *25, i *25,25,25);}}