You can change the .penColor
property of signaturepad
during runtime (the API supports this). In order to translate the hex into rgb() you should use the answer linked here by another person as well
hexToRgb adapted from: https://stackoverflow.com/a/5624139/1026459
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? "rgb("+parseInt(result[1], 16)+
","+parseInt(result[2], 16)+
","+parseInt(result[3], 16)+")"
: null;
}
So using this and assigning the property on click ends up looking like this:
$('.global-color li').click(function(){
$('.on').removeClass('on');//demo highlighting only
var $t = $(this);
$t.addClass('on');//demo highlighting only
var selectedColor = $t.data('color');//read data
signaturePad.penColor = hexToRgb(selectedColor);//assign to pen color
});