Question

I’m using canvas in web app built with jquery ui. I added the theme-roller widget and want the canvas elements to be themeable. So the problem I’m facing is, how do I programatically access css class properties to use while drawing canvas objects?

this is what I tried:

var color = $("<div></div>").addClass("ui-state-default").css("background-color");  

Answer 1

Got it. The element needed to be added to the DOM.

function getClassProperty(clazz,prop,type){
    type = (type || false) ? type : "div";
    var dummy = $("<"+type+" style='display=none;'></"+type+">").addClass(clazz).appendTo("body");
    var value = dummy.css(prop);
    dummy.remove();
    if(value.indexOf("rgb") != -1){
        var digits = /(.*?)rgba?\((\d+),\s?(\d+),\s?(\d+)[\),]/.exec(value);
        return "#" + (parseInt(digits[4])|(parseInt(digits[3])<<8)|(parseInt(digits[2])<<16)).toString(16);
    }else{
        return value;
    }
}
console.log(getClassproperty("ui-state-default","background-color"));

rgb2hex code taken from: http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx