Jump to content
AARRGGHHH

Get the value of CSS Hue applied to a Canvas

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

Share this post


Link to post
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.

Share this post


Link to post
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 

Share this post


Link to post
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>

 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...