Gerador Bandeira Antifascista - Parte 2

...

by felipealencar

HTML

<form>
					<legend>
						<b>GERADOR DE BANDEIRA ANTIFASCISTA</b>
						<br>
						<sup><i>(Ao terminar, pressione na imagem para salvá-la)</i></sup>
					</legend>
					<label id="label-nome" for="nome">Nome</label><input type="text" id="nome" placeholder="Digite...">
					<label id="label-plural" for="p">Plural</label><input type="checkbox" id="p" value="S">
				
					<label for="rHue">Cor</label><input type="range" id="rHue" max="359" value="0">
					<label for="rSat">Saturação</label><input type="range" id="rSat" value="100">
					<label for="rL">Luminosidade</label><input type="range" id="rL" max="200" value="30"></label>
				</form>

JavaScript

function render() {

	var hue = +rHue.value, sat = +rSat.value, l = +rL.value;

	ctx.clearRect(0, 0, c.width, c.height);
	ctx.globalCompositeOperation = "source-over";
	ctx.drawImage(bandeiraCustomizada, 0, 0, c.width, c.height);

	// adjust "lightness"
	ctx.globalCompositeOperation = l < 100 ? "color-burn" : "color-dodge";
	// for common slider, to produce a valid value for both directions
	l = l >= 100 ? l - 100 : 100 - (100 - l);
	ctx.fillStyle = "hsl(0, 50%, " + l + "%)";
	ctx.fillRect(0, 0, c.width, c.height);

	// adjust saturation
	ctx.globalCompositeOperation = "saturation";
	ctx.fillStyle = "hsl(0," + sat + "%, 50%)";
	ctx.fillRect(0, 0, c.width, c.height);
	// adjust hue
	ctx.globalCompositeOperation = "hue";
	ctx.fillStyle = "hsl(" + hue + ",1%, 50%)";
	ctx.fillRect(0, 0, c.width, c.height);

}

var ctx = c.getContext("2d");
var bandeiraCustomizada = new Image();
bandeiraCustomizada.onload = demo;
bandeiraCustomizada.src = "bandeira.png";
p.oninput = nome.oninput = rHue.oninput = rSat.oninput = rL.oninput = render;