46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
|
|
function createColorPalette(selectedPalette, fillBackground) {
|
|
//remove current palette
|
|
colors = document.getElementsByClassName('color-button');
|
|
while (colors.length > 0) {
|
|
colors[0].parentElement.remove();
|
|
}
|
|
|
|
var lightestColor = '#000000';
|
|
var darkestColor = '#ffffff';
|
|
|
|
for (var i = 0; i < selectedPalette.length; i++) {
|
|
var newColor = selectedPalette[i];
|
|
var newColorElement = addColor(newColor);
|
|
|
|
var newColorHex = hexToRgb(newColor);
|
|
|
|
var lightestColorHex = hexToRgb(lightestColor);
|
|
if (newColorHex.r + newColorHex.g + newColorHex.b > lightestColorHex.r + lightestColorHex.g + lightestColorHex.b)
|
|
lightestColor = newColor;
|
|
|
|
var darkestColorHex = hexToRgb(darkestColor);
|
|
if (newColorHex.r + newColorHex.g + newColorHex.b < darkestColorHex.r + darkestColorHex.g + darkestColorHex.b) {
|
|
|
|
//remove current color selection
|
|
var selectedColor = document.querySelector('#colors-menu li.selected');
|
|
if (selectedColor) selectedColor.classList.remove('selected');
|
|
|
|
//set as current color
|
|
newColorElement.classList.add('selected');
|
|
|
|
darkestColor = newColor;
|
|
}
|
|
|
|
}
|
|
|
|
//fill bg with lightest color
|
|
if (fillBackground) {
|
|
currentLayer.context.fillStyle = lightestColor;
|
|
currentLayer.context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
|
|
}
|
|
|
|
//set as current color
|
|
currentLayer.context.fillStyle = darkestColor;
|
|
}
|