Я работаю на холсте и использую библиотеку EaselJS, чтобы поиграть. С EaselJS я могу применять ColorMatrix, используя фильтры

const myGraphics = new createjs.Shape(); myGraphics.graphics.bf(img, 'no-repeat') .drawCircle(x, y, cursorSize); const colorMatrix = [0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 1, 0]; const blurFilter = new createjs.BlurFilter(5, 5, 1); myGraphics.filters = [new createjs.ColorMatrixFilter(colorMatrix), blurFilter]; myGraphics.cache(0, 0, 500, 500); 

Можно ли применить то же самое без использования EaselJS? У меня есть код ниже

  const patt = ctx.createPattern(img, 'no-repeat'); ctx.filter = 'blur(5px)'; ctx.fillStyle = patt; ctx.beginPath(); ctx.arc(x, y, r1, 0, Math.PI * 2); ctx.fill(); 

Как я могу применить фильтр colorMatrix к описанному выше контексту холста?

заранее спасибо

Вы можете использовать фильтры svg с нотацией css url(#filter_id) для свойства context.filter , а для цветовой матрицы используйте элемент {amp}lt;feColorMatrix{amp}gt; svg:

 const canvas = document.getElementById( 'canvas' ); const ctx = canvas.getContext( '2d' ); const img = new Image(); img.onload = e ={amp}gt; { ctx.fillStyle = ctx.createPattern(img, 'repeat'); ctx.filter = 'url(#matrix)'; ctx.rect( 20, 20, 460, 460 ); ctx.scale( 0.15, 0.15 ); ctx.fill(); }; img.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"; 
 {amp}lt;svg width="0" height="0" style="position:absolute;z-index:-1"{amp}gt; {amp}lt;filter id="matrix"{amp}gt; {amp}lt;feColorMatrix type="matrix" values="0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 1, 0"/{amp}gt; {amp}lt;/filter{amp}gt; {amp}lt;/svg{amp}gt; {amp}lt;canvas id="canvas"{amp}gt; width="500" height="500"{amp}gt;{amp}lt;/canvas{amp}gt;