0

Have a css script with colourful filter:

@keyframes rainbowEffect {
     from {filter: brightness(0.5) sepia() saturate(4) hue-rotate(0deg);}
     to {filter: brightness(0.5) sepia() saturate(4) hue-rotate(360deg);}
}
.infiniteRainbow {
     animation: rainbowEffect 10s linear infinite;
}

loading the script as: <link rel="stylesheet" href="scripts/colorful.css">

Then I have a bunch of images loaded with different categories, supposed that if the category of the image is/equals colourful, then apply the rainbow effect (filter) on them. But not sure what to write in drawImage()...

var t = deconstructImage(selected).clearName;
c = document.getElementById("frontground").getContext("2d");

if (data[t].cat === "Colourful" && !locked) {
   c.drawImage(document.getElementById(data["Colour man"].file) "what to write here???" )
}

Thanks.

Peanut Jams
  • 374
  • 2
  • 9
  • You can apply CSS filters to your .drawImage() function by setting the context.filter attribute to the filter's String values immediately before invoking drawImage. Note that SVG filters applied to canvas contexts aren't supported by Safari browsers at this time. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter – KaliedaRik Jan 30 '21 at 11:44
  • It worked... though buggy with "ctx.filter = 'blur(4px)';" but is there anyway to apply the entire script instead of setting effects within quotation marks? – Peanut Jams Jan 30 '21 at 11:58
  • The ctx.filter attribute will only accept a String value. That value can be an URL to a real SVG element included in the DOM, which you can then manipulate in real time - I've done some experiments with my canvas library (see, for instance: https://codepen.io/kaliedarik/pen/NWRaZdz ) - but you'll need to decide if this is a productive avenue for you to investigate/explore for your project. – KaliedaRik Jan 30 '21 at 13:03

0 Answers0