Le filtre de contexte de toile de Javascript s'applique seulement pour flouter

Question

Je suis intéressé à faire l'application de filtre de CSS aux données d'image d'une toile de javascript. J'ai déjà trouvé le canvas context filter. Par exemple, cela fonctionne avec le flou.

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
ctx.filter = 'blur(3px)'; 
 
ctx.font = '48px serif'; 
 
ctx.strokeText('Hello world', 50, 100);

<canvas id="canvas"></canvas>

Alors que le code ci-dessous ne fonctionne pas parce que si elle l'a fait, alors tout l'écran serait blanc.

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
ctx.filter = 'brightness(1000%)'; 
 
ctx.font = '48px serif'; 
 
ctx.strokeText('Hello world', 50, 100);

<canvas id="canvas"></canvas>

En outre, comme une note de côté, je ne me soucie pas de ma demande d'inscription sur les non navigateurs Chrome/FF, alors s'il vous plaît ne mentionnez pas moins que si vous avez un polyfill pour il.

Answer 1

J'ai trouvé la réponse à ma question: vous devez dessiner la toile sur elle-même pour appliquer les filtres.

var canvas1 = document.getElementById('canvas1'); 
 
var ctx1 = canvas1.getContext('2d'); 
 
var canvas2 = document.getElementById('canvas2'); 
 
var ctx2 = canvas2.getContext('2d'); 
 

 
ctx1.font = '48px serif'; 
 
ctx1.strokeStyle = 'red'; 
 
ctx1.strokeText('Hello world', 50, 50); 
 
ctx1.filter = 'brightness(0%)'; 
 

 
ctx2.font = '48px serif'; 
 
ctx2.strokeStyle = 'red'; 
 
ctx2.strokeText('Hello world', 50, 50); 
 
ctx2.filter = 'brightness(0%)'; 
 
ctx2.drawImage(canvas2, 0, 0);

Before<br /> 
 
<canvas id=1></canvas><br /> 
 
After<br /> 
 
<canvas id=2></canvas>

Answer 2

Vous ne voyez pas l'effet de luminosité car le texte est de couleur noire par défaut. La luminosité modifie la concentration de la couleur sélectionnée et la mélange avec la couleur noire. Par exemple, si vous avez 70% de texte et de luminosité rouge, votre texte aura 70% de rouge et 30% de noir.

Il suffit d'ajouter la couleur dans strokeStyle:

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
ctx.filter = 'brightness(70%)'; 
 
ctx.font = '48px serif'; 
 
ctx.strokeStyle = 'red'; 
 
ctx.strokeText('Hello world', 50, 100);

<canvas id="canvas"></canvas>