Jump to content

Get the value of CSS Hue applied to a Canvas

Recommended Posts


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 

More Info
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.

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 

Link to post
Share on other sites
<!DOCTYPE html>
        <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>

            img#myImg {
                width: 260px;
                filter: hue-rotate(90deg);
        <img id="myImg" src="https://www.w3schools.com/cssref/pineapple.jpg" style="filter: hue-rotate(90deg);">
            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);



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.

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.

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.

  • Create New...