Olá, Sei que talvez esteja passando a carroça na frente dos bois, mas vamos lá.
Estava fazendo o desafio da flor com os círculos, e por um erro de calculo cheguei num resultado onde as cores se sobrepõe, ai tive um gatilho... meu modo Photoshop foi ligado, deu uma vontade loca de aplicar um multiply. rs!
É possível fazer uma mesclagem em JS ?
Claro, uma coisa simples, sem viajar muito. Exemplo figurativo, pincel.blendMultiply = 'blue';
há! eu não hesitei em tentar essa sintaxe, rs... mas não rolou.
<canvas width="600" height="400"></canvas>
<!-- cmts
-->
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculos(x, y, raio, cor,) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function desenhaFlor(x, y, raio) {
var raioFlor = raio;
var distanciaPetalas = raioFlor * 1.5; // aqui o valor 2, chega no resultado do desafio.
var deslocaCirculos = distanciaPetalas;
desenhaCirculos(x, y, raioFlor, cores[0]);
desenhaCirculos(x - deslocaCirculos, y, raioFlor, cores[1]);
desenhaCirculos(x + deslocaCirculos, y, raioFlor, cores[2]);
desenhaCirculos(x , y - deslocaCirculos, raioFlor, cores[3]);
desenhaCirculos(x , y + deslocaCirculos, raioFlor, cores[4]);
}
var cores = ['red','green','black','yellow','blue'];
desenhaFlor(300, 200, 50);
</script>