How to successfully display contrast differences in images draw using HTML5 canvas on a Mac desktop?

Question

I want to display two Gabor patches on my screen for my experiment. I am drawing the Gabor patches using HTML5 canvas. I want both patches to have different contrast levels. When I run the code on Windows PC and laptops using chrome and firefox, the patches are successfully presented with the desire contrast differences. However, when I run it on a Mac desktop using Firefox and Chrome, the gabor patch is displayed at absolute contrast. The contrast level for the gabor patch does not change. That is, the patch ends up having the same contrast level i.e 1. 1 is the brightest contrast. Here is my code:

var c = document.getElementById("myCanvas");
var context = c.getContext("2d"); 
const my_gradient = context.createLinearGradient(0, 0, 200, 0);
const bands = 10;
const colors = ["#000", "#FFF"];
const stops = bands * colors.length;
var pos = 0;
while (pos <= stops) {
  my_gradient.addColorStop(pos / stops, colors[pos % colors.length]);
  pos++;
}
context.fillStyle = my_gradient;
context.filter = "contrast(0.2)"
context.fillRect(100, 200, 100, 100)
context.stroke()

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #D3D3D3;">
Your browser does not support the HTML canvas tag.</canvas>