Estoy creando un lienzo con una imagen dentro usando
context.drawImage(image, (cWidth - iRatio)/2, 0, iRatio, cHeight);
Y detrás del lienzo hay un fondo de pantalla azul dentro de un div.
Como puede ver en la imagen (hecha en Photoshop), el Lienzo (Imagen con el Sol) se está desvaneciendo de la opacidad 1 a 0.
¿Cómo puedo hacerlo en Canvas con JS o CSS? Quiero que los bordes del lienzo (todos, es decir, izquierdo, derecho, superior e inferior) tengan una opacidad 0 y se desvanezcan hacia el centro con una opacidad 1.
Puedes usar mask
:
img { mask:radial-gradient(circle, white 30%, transparent 60%); }
<img src="https://i.stack.imgur.com/Onn3y.png" />
MDN tiene muchos ejemplos: puede usar degradados, svg e incluso png para obtener el efecto que desea.
También hay mask-border
pero no es tan compatible (por ejemplo, Firefox aún no lo admite).
Use ctx.filter
para crear un desenfoque y use ese desenfoque para mantener los píxeles que desea y elimine los píxeles del borde usando ctx.globalCompoiteOperation = "detination-in"
El siguiente ejemplo utiliza la función featherEdge
bordes del contenido del lienzo.
const ctx = canvas.getContext("2d"); const img = new Image; img.src = "https://i.stack.imgur.com/Onn3y.png"; img.addEventListener("load", draw, {once: true}); function draw() { ctx.drawImage(img, 0, 0); featherEdge(20, 2); } function featherEdge(blurRadius, inset) { ctx.filter = "blur(" + blurRadius + "px)"; ctx.globalCompositeOperation = "destination-in"; const inBy = blurRadius + inset; ctx.fillRect(inBy, inBy, canvas.width - inBy * 2, canvas.height - inBy * 2); }
canvas { background: cyan; }
<canvas id="canvas" width="200" height="200"></canvas>