Jump to content

Get the value of CSS Hue applied to a Canvas


AARRGGHHH

Recommended Posts

Hello

I need to get the value of a CSS Filter, Hue in this case, that's currently being applied to a canvas.  I tried this: 

var hue = document.getElementById('canvas1').style.filter('hue-rotate'); 

and it did not work, several variations on that theme also failed.  

What is the correct syntax? 

Thank you very much 

PS: this could apparently also work 

var hue = getComputedStyle(canvas1).filter

But it will not retrieve just the hue. 

Thank you 

Edited by AARRGGHHH
More Info
Link to comment
Share on other sites

I would suggest using your browser's developer tools to look at the actual properties of the actual element, then you don't have to guess.  You can right-click on it and choose Inspect Element in most modern browsers.

Link to comment
Share on other sites

Yes, I understand that process, that wasn't really the question.  The reason I'm guessing is that I don't know the answer.  Is there a way to retrieve just the hue value (or just the saturation value) etc...  I'm guessing that such a command exists, but I do not know what it is. 

Thank you 

Link to comment
Share on other sites

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0">
        <title>Document Title</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

        <style>
            img#myImg {
                width: 260px;
                filter: hue-rotate(90deg);
            }
        </style>
    </head>
    <body>
        <img id="myImg" src="https://www.w3schools.com/cssref/pineapple.jpg" style="filter: hue-rotate(90deg);">
        <script>
            var elem = document.getElementById('myImg');
            var hue = elem.style.filter.replace(/\D/g, '');
          
            alert('From inline: ' + hue);
            var huecss = window.getComputedStyle(elem, null).getPropertyValue("filter").replace(/\D/g, '');
         
            alert('From internal: ' + huecss);

        </script>
    </body>
</html>

 

Link to comment
Share on other sites

The reason I'm guessing is that I don't know the answer.

And how do you figure out which properties are available on an element?  Wouldn't it make sense to inspect the element and see an actual, live, list of all properties and their values?  Doesn't that sound better than guessing?  I don't know the answer to your question either, I don't think there are many people who go around with the complete documentation in their mind, so if I were to answer your question the first thing I would do would be to inspect the element and see what properties it actually has.  So, might as well skip the middle man and teach you how do you that yourself.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...