how can we grayscale a pattern image used in canvas (javascript)

Question

created a circle context and added the pattern image to fill in that circle.how can i make that pattern image grayscaled. Is there any idea that would help me.

code :

    ctx.beginPath();
    var bg = new Image();    
    bg.src = image;  
    bg = function() {
        var pattern = ctx.createPattern(this, "no-repeat");
        ctx.fillStyle = pattern;
    };
    ctx.moveTo(canvasCenterHoriz, canvasCenterVert);
    ctx.arc(x, y, radius, startAngle, endAngle, direction);
    ctx.lineWidth = 0;
    ctx.fill();

Possible duplicate of [Canvas - Change colors of an image using HTML5/CSS/JS?](https://stackoverflow.com/questions/10069171/canvas-change-colors-of-an-image-using-html5-css-js) — André Laszlo, Nov 11 '17 at 18:58
That dup answer is way out of date and does not show current methods. Use `ctx.filter = "saturate(0%)"` and draw image it will be grayscaled. Or draw the image then set `ctx.globalCompositeOperation = "saturation"` and `ctx.fillStyle = "#888"` and then draw over the image with the fill to get grayscale. — Blindman67, Nov 11 '17 at 19:37
This answer https://stackoverflow.com/a/39026987/3877726 shows many realtime FX filters applied to video on canvas (but can also be used for still images) and do not require secured same domain images, and is many time quicker than the suggested duplicate answer's very old school methods. — Blindman67, Nov 11 '17 at 19:45
That's great @Blindman67, here's a better duplicate: https://stackoverflow.com/questions/40787895/replicate-the-partial-css-grayscale-filter-in-javascript — André Laszlo, Nov 11 '17 at 19:46

André Laszlo · Accepted Answer · 2017-11-12T17:37:40.843

This might not be the best way to do this, but it's pretty simple and it works.

I have attached a working example below. Here's how it works:

The pattern image is drawn in an invisible canvas. Once the image has loaded, it is drawn on the canvas with a white overlay and saturation set as the global composite operation. The canvas will now contain a grayscale version of your pattern.

The temporary canvas is then converted to an image, with its source set to the canvas data url. Maybe there's a better way to send image data between two canvases, but I haven't found one.

Once the pattern is finished, your original arc is drawn with the new pattern.

let canvas = document.getElementById('grayscale-canvas');
let ctx = canvas.getContext('2d');

function makeGrayscaleBackground(image, onready) {
  var bg = new Image();
  bg.src = image;
  bg.onload = function() {
    // Create a canvas that's not attached to the DOM
    var canvas = document.createElement('canvas');
    canvas.setAttribute('width', this.width);
    canvas.setAttribute('height', this.height);
    document.body.appendChild(canvas);
    let ctx = canvas.getContext('2d');

    // Draw the background image
    ctx.drawImage(this, 0, 0);

    // Then draw a white layer on top, with the saturation composite operation
    // which will remove the color from the underlying image
    ctx.globalCompositeOperation = "saturation";
    ctx.fillStyle = "#FFF";
    ctx.fillRect(0, 0, this.width, this.height);

    onready(canvas);
  };

}

function drawWithImage(image) {

  makeGrayscaleBackground(image, function(patternImage) {
    // Green background
    ctx.fillStyle = "#3f9";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Make a repeating pattern with image we created
    var pattern = ctx.createPattern(patternImage, "repeat");

    // Make an arc with the pattern
    let x = y = canvas.width/2;
    ctx.fillStyle = pattern;
    ctx.beginPath();
    ctx.arc(x, y, canvas.width/2-10, 0, 2*Math.PI);
    ctx.fill();
  })

}

// Example pattern image
// For security reasons, the image needs to be hosted on the same server as the script!
var bgImage = "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7";
drawWithImage(bgImage);
document.getElementById('bg').src = bgImage;

<canvas width="150" height="150" id="grayscale-canvas"></canvas><br>
Actual background image: <img id="bg"><br>
Modified background image:

Thanks, I will update the snippet tomorrow if nobody volunteers. — André Laszlo, Nov 12 '17 at 02:14

how can we grayscale a pattern image used in canvas (javascript)

1 Answers1