css - Grayscale canvas based on percentage (In FireFox) -

I have a problem with working with grayscale with Firefox. I should be able to:

  $ (element). Css ('filter', 'grayscale (' + + + ''%) ');  

But I know that this is not going to happen

Now I know that I can do some fancy stuff with SVG-based filter, but let me Should be able to control the percentage of grayscale filters to be fluidly specific, I am going to move the background of my page as you scroll downwards.

Now it will be simpler simply, because I could only embed a grayscale copy of a SVG or overlay on my image at the top, but I was partly in the background as & lt; Canvas> Now from there, I could only apply a custom filter to the canvas, but it is being updated several times per second.

Currently, I've been closest to:

  $ (element). CSS ('Filter', 'URL ("Data: Image / SVG + xml; UTF8, & lt; svg xmlns = \' http: //www.w3.org/2000/svg \ '& gt; & lt; Filter ID = \ 'Grayscale \' & gt; & lt; feColorMatrix type = \ 'saturate \' value = \ '' + (100 - val) + '\' /> gt; & lt; / filter & gt; Lt; / svg & gt; #grayscale ") ');  

But this code makes it so that my canvas constantly refreshes while scrolling, so I can not even see my background.

How can I get on earth to work with Firefox? I'm open to anything, no matter how much hack.

Why are you applying it to & lt; Canvas & gt; ? Simply use a container with the background image and apply rainyday.js to the canvas inside it.

In this way you will not care to update the canvas.

Edit

This is probably the case where you have to go all the way with JS. You can find a simple JS method to scale images with JS (2 points).

I suggest saving you that output in one variable and keeping it as src in the rainy day. Run () function.

Something like this

  var imgObj = document.getElementById ('background'); Function gray (IMGOBJ) {var canvas = document. Create element ('canvas'); Var Canvas Contact = Canvas. GateConttex ('2D'); Var imgW = imgObj.width; Var imgH = imgObj.height; Canvas.width = imgW; Canvas Het = img; CanvasContext.drawImage (imgObj, 0, 0); Var imgPixels = canvasContext.getImageData (0, 0, IMGW, IMGH); (Var y = 0; y & lt; imgPixels.height; y ++) {for (var x = 0; x & lt; imgPixels.width; x ++) {var i = (y * 4) * imgPixels .width + x * 4; Var avg = (imgPixels.data [i] + imgPixels.data [i + 1] + imgPixels.data [i + 2]) / 3; ImgPixels.data [i] = average; ImgPixels.data [i + 1] = average; ImgPixels.data [i + 2] = average; }} CanvasContext.putImageData (imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); Return canvas.Tadata url (); } ImgObj.src = Gray (imgObj); Function run () {var image = document.getElementById ('background'); Image.onload = function () {var engine = new rarity ({image: this}); Engine.rain ([[1, 2, 8000]]); Engine.rain ([[3, 3, 0.88], [5, 5, 0.9], [6, 2, 1]], 100); }; Image.crossOrigin = 'Anonymous'; Image.src = Gray (IMGobab); }  

Just guessing, I did not test it.