Digamos que queremos aplicar un filtro SVG en un elemento de lienzo. De acuerdo con esto , podemos aplicar un filtro SVG al CanvasRenderingContext2D en javascript como este, el filtro solo afectará las formas dibujadas después de esa llamada:
ctx.filter = "url(#bar)";También podemos simplemente aplicar el filtro en CSS en todo el lienzo:
#canvas { filter: url(#bar); }Necesito aplicar el filtro en javascript ya que solo quiero que se filtre una parte de mi lienzo. Al aplicar feColorMatrix a algunas o todas las formas, los resultados difieren según el filtro que se haya aplicado en el contexto 2D en JS o en todo el elemento del lienzo en CSS.
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.filter = "url(#bar)"; ctx.fillRect(10,10,100,100); ctx.fillRect(10,120,100,100); ctx.fillRect(120,10,100,100); ctx.fillStyle = 'red'; ctx.beginPath(); ctx.ellipse(170, 170, 50, 50, Math.PI / 4, 0, 2 * Math.PI); ctx.fill(); #canvas { /* remove comment to see difference */ /* filter: url(#bar); */ } <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="bar"> <fegaussianblur in="SourceGraphic" stdDeviation="10" result="blur"></fegaussianblur> <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"></fecolormatrix> </filter> </defs> </svg> <canvas id="canvas" width="400" height="400"></canvas>Cuando elimina el comentario que aplica el filtro SVG en todo el lienzo, da este gran efecto pegajoso, parece que no puedo lograr ese efecto solo con JS. ¿Qué me estoy perdiendo aquí? ¿No deberían los dos métodos dar el mismo resultado?
El filtro CSS se aplica a la imagen del lienzo como un todo. Esto es fundamentalmente diferente que en su código JS donde aplica el filtro en cada rectángulo por separado.
Tomemos, por ejemplo, este código donde dibujo rectángulos con algo de transparencia. Cada rectángulo del lado izquierdo se dibuja uno por uno, mientras que los del lado derecho se dibujan todos en una sola operación de dibujo. Puede ver cómo globalAlpha no produjo el mismo resultado en absoluto.
const ctx = document.querySelector("canvas").getContext("2d"); ctx.globalAlpha = 0.25; for(let y = 0; y<150; y+=10) { // draws each rectangle one after the other ctx.fillRect(0, 0, 50, y); } for(let y = 0; y<150; y+=10) { ctx.rect(100, 0, 50, y); } // draws all the right-side rectangles in one go ctx.fill(); <canvas></canvas> Pues exactamente lo mismo sucede con el filtro.
Para obtener el mismo efecto, dibuje todos sus rectángulos una vez y luego vuelva a dibujar el lienzo sobre sí mismo con el filtro para que se aplique a toda la imagen.
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillRect(10,10,100,100); ctx.fillRect(10,120,100,100); ctx.fillRect(120,10,100,100); ctx.fillStyle = 'red'; ctx.beginPath(); ctx.ellipse(170, 170, 50, 50, Math.PI / 4, 0, 2 * Math.PI); ctx.fill(); ctx.filter = "url(#bar)"; // clears what was there, alternatively we could have used a second canvas ctx.globalCompositeOperation = "copy"; ctx.drawImage(canvas, 0, 0); <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position:absolute;z-index:-1"> <defs> <filter id="bar"> <fegaussianblur in="SourceGraphic" stdDeviation="10" result="blur"></fegaussianblur> <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"></fecolormatrix> </filter> </defs> </svg> <canvas id="canvas" width="400" height="400"></canvas>