Saturate image where mouse is hovering

Question

I'm trying to have an image on my website become saturated at the same location the mouse is. When the mouse moves the saturation effect goes with it, and the area previously hovered over becomes grayscale again. I'm thinking this effect could be accomplished using saturate(), however I haven't had any success with it. Additionally, I would like the effect to be circular without hard edges similar to this.

Example of what it would look like (orange arrow indicating where the mouse is).

Any help or insight would be appreciated, thanks!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content= "width=device-width, initial-scale=1.0" />     
    </head>
    
    <script>
        const size = 250;
        var radius = 30;
        var rad = Math.PI / 180;

        var canvas = document.querySelector("canvas")
        var ctx = canvas.getContext("2d");

        canvas.width = size;
        canvas.height = size;

        var image = new Image();
        image.onload = demo
        image.src = "https://picsum.photos/250"

        function draw_circle(x, y, radius) {
          ctx.clearRect(0, 0, size, size);
          ctx.drawImage(image, 0, 0); // image to change
          ctx.globalCompositeOperation = "saturation";
          ctx.beginPath();
          ctx.fillStyle = "hsl(0,100%,50%)"; // saturation at 100%
          ctx.arc(x, y, radius, 0, 360 * rad, false);
          ctx.fill()
          ctx.closePath();
          ctx.globalCompositeOperation = "source-over"; // restore default comp
        }


        function demo() {
        ctx.drawImage(image, 0, 0); // image to change
        
        canvas.addEventListener('mousemove', function(ev) {
          var cx = ev.offsetX
          var cy = ev.offsetY
          draw_circle(cx, cy, radius)
          })
        }
    </script>
    
    <canvas></canvas>
    
</html>

Please see [ask] and take the [tour]. You're required to show some code. — isherwood, Aug 12 '22 at 20:29

score 0 · Answer 1 · answered Aug 12 '22 at 19:58

Using a canvas we can try. Here's a start inspired by How can I adjust the huse, saturation, and lightness of in image in HTML5 Canvas?.

const size = 250;
var radius = 30;
var rad = Math.PI / 180;

var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d");

canvas.width = size;
canvas.height = size;




var image = new Image();
image.onload = demo
image.src = "https://picsum.photos/250"

function draw_circle(x, y, radius) {
  ctx.clearRect(0, 0, size, size);
  ctx.drawImage(image, 0, 0); // image to change
  ctx.globalCompositeOperation = "saturation";
  ctx.beginPath();
  ctx.fillStyle = "hsl(0,100%,50%)"; // saturation at 100%
  ctx.arc(x, y, radius, 0, 360 * rad, false);
  ctx.fill()
  ctx.closePath();
  ctx.globalCompositeOperation = "source-over"; // restore default comp
}


function demo() {
  ctx.drawImage(image, 0, 0); // image to change
  
  canvas.addEventListener('mousemove', function(ev) {
    var cx = ev.offsetX
    var cy = ev.offsetY
    draw_circle(cx, cy, radius)
  })
}

<canvas></canvas>

Thanks! This looks similar to what I'm looking for! I'm having trouble getting it functioning on my end, do you see anything wrong? I've included the code I have in my post. Thanks again. — Cbiscuit, Aug 12 '22 at 22:01

score 0 · Answer 2 · answered Aug 12 '22 at 20:06

This is a simple answer (change the logic of the program as you want):

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.relative {
        position: relative;
        width: 200px;
        height: 150px;
      }

      .image {
        width: 100%;
        height: 100%;
      }
    </style>

    <script>
      const width = 50;
      const height = 50;

      function create() {
        const element = document.createElement("div");
        element.id = "filtered";
        element.style.width = `${width}px`;
        element.style.height = `${height}px`;
        element.style.borderRadius = "50%";
        element.style.position = "absolute";
        element.style.backgroundColor = "red";
        element.style.opacity = "0.2";
        element.style.zIndex = "2";

        return element;
      }

      function changePos(e) {
        x = e.clientX;
        y = e.clientY;

        let element = document.getElementById("filtered");

        if (!element) {
          element = create();
          document.getElementById("focusArea").appendChild(element);
        }

        element.style.left = `${x - width / 2}px`;
        element.style.top = `${y - height / 2}px`;
      }

      function removeElement() {
        if (document.getElementById("filtered")) {
          document.getElementById("filtered").remove();
        }
      }
    </script>
  </head>

  <body>
    <div
      id="focusArea"
      onmouseleave="removeElement()"
      onmousemove="changePos(event)"
      class="relative"
    >
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png"
        class="image"
      />
    </div>
  </body>
</html>

This is kind of close, however it's just a red circle that hovers where the mouse is. Instead I'm wanting the background image to change depending on where the mouse is (wherever the mouse is on the image is where the image isn't grayscale). — Cbiscuit, Aug 12 '22 at 22:22

Saturate image where mouse is hovering

2 Answers2