Discussion :

[Archimède]

Salut, avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 ctx.globalCompositeOperation='lighter';

, je peux facilement faire de l'additif avec canvas context mais j'ai besoin de faire du soustractif, soit par exemple un rectangle jaune que l'on superpose à un magenta et l'obtention du rouge à l'intersection du chevauchement...Peut-être existe-il une méthode générale de context qui face le job si c'est possible... puisque les écrans fonctionnent en additif des couleurs primaires rouge,vert et bleue.

[NoSmoking]

Bonjour,
si tu n'as pas trouvé ton bonheur dans : Compositing and Blending Level 2, c'est que cela n'est actuellement pas prévu.

Voir également : Exemple de composition sur MDN

[Archimède]

Salut, merci pour tes liens mais je n'ai pas trouvé mon bonheur. En revanche je ne savais pas faire de l'additif avec svg et ton premier lien me donne la solution... Nickel ! Et pour ce que j'aimerais faire en soustractif, j'arriverai à me débrouiller...

[NoSmoking]

mais j'ai besoin de faire du soustractif, soit par exemple un rectangle jaune que l'on superpose à un magenta et l'obtention du rouge à l'intersection du chevauchement...

j'ai regardé un peu plus avant et l'on peut tout à fait obtenir le bon résultat avec au moins deux modes, mode darken et mode multiply en couleur CMY.

La page de test :

↪ <canvas> mode de fusion (blending)

[Archimède]

Ha, nickel chrome... en effet, je viens de retester avec "darken" et ça fonctionne parfaitement. Lors de mes essais, j'avais un fillRect() noir en fond de canvas, je mettais après le dessin du fillRect

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ctx.globalCompositeOperation='darken';

et ensuite mes disques de couleurs secondaires et je n'obtenais rien...
La suppression du fond règle le problème... je suis donc passé à côté. Je vais aussi regarder 'multiply'...
Il suffit dans mon cas de mettre un background-color en CSS sur mon canvas.
Parfait, c'est résolu et merci pour ta démo !

[NoSmoking]

Il suffit dans mon cas de mettre un background-color en CSS sur mon canvas.

on peut ajouter facilement une couleur de fond, après dessin :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
context.globalCompositeOperation = "destination-over";
context.fillStyle = "#FFF";
context.fillRect(0, 0, canvas.width, canvas.height);

[Archimède]

Re,
encore bien vu...en effet, ça marche ! Ceci dit, en passant pas CSS, c'est plus succinct mais la méthode mérite d'être connue... Parfait tout ça...