Javascript Canvas Context Filterのみ適用対象：ぼかし

Question

JavaScriptフィルタをJavaScriptキャンバスの画像データに適用することに興味があります。私はすでにcanvas context filterを見つけました。たとえば、これはぼかしで動作します。

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>

それがなかった場合、画面全体が白になるので、以下のコードは動作しませんが。

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>

また、サイドノートとして、私はあなたがのためにポリフィルを持っているかのない限り、これを言及しないでください、非クロム/ FFブラウザ上で利用できる自分のアプリケーションを持っている気にしませんそれ。

Answer 1

私は私の質問への答えを発見した：あなたは、フィルタを適用すること自体にキャンバスを描画する必要があります。

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

デフォルトでテキストが黒色になっているため、明るさ効果は表示されません。

明るさは、選択した色の濃度を変更して黒色と混ざります。たとえば、赤色のテキストと明るさのプロパティが70％の場合、テキストの赤色は70％、黒色は30％になります。

だけ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>