(function(doc) {
	ColorTriangle.initColorInputs({ margin:5,event:'drag',size:150});
	backgroundColorInput = document.getElementById('background-color-input');
	function update() {
		relleno = backgroundColorInput.value;
		document.getElementById('paleta').style.backgroundColor = relleno;
				//relleno = triangle.getHEX();
		var activeObject = canvas.getActiveObject();
		var	activeGroup = canvas.getActiveGroup();
			if (activeObject) {
				activeObject.setFill(relleno);
				canvas.renderAll();
				}else if (activeGroup) {
				var objectsInGroup = activeGroup.getObjects();
				objectsInGroup.forEach(function(object) {
					object.setFill(relleno);
					canvas.renderAll();
				});
			}
	}
	backgroundColorInput.addEventListener('change', update, false);
	//update();
})(document);
