Estoy tratando de dibujar varios trazos en un lienzo y me gustaría que tuvieran una sombra común. Actualmente, las sombras se proyectan entre sí, lo que no es lo que quiero.
Si necesita que cada trazo sea independiente (es decir, que cada uno tenga su propio estilo de trazo o ancho de línea), deberá usar un segundo lienzo separado:
drawImage
ese lienzo separado en el visible con la sombra: const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const detached = canvas.cloneNode(); const detachedCtx = detached.getContext("2d"); const colors = ["green", "blue", "yellow", "orange", "aqua"]; detachedCtx.lineWidth = 5; for (let color of colors) { // draw on the detached canvas detachedCtx.beginPath(); for (let i = 0; i<5; i++) { detachedCtx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height); } detachedCtx.strokeStyle = color; detachedCtx.lineWidth = Math.random() * 8 + 2; detachedCtx.stroke(); } // now draw all this with shadows on the visible canvas ctx.shadowOffsetX = 3; ctx.shadowOffsetY = 3; ctx.shadowBlur = 3; ctx.shadowColor = "red"; ctx.drawImage(detached, 0, 0);
<canvas></canvas>
Pero para producir la imagen que tiene, todo lo que necesita es llamar a stroke()
solo una vez después de que compuso su ruta completa:
const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "#0F0"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.lineWidth = 5; ctx.shadowOffsetX = -3; ctx.shadowOffsetY = -3; ctx.shadowBlur = 3; ctx.shadowColor = "red"; ctx.moveTo(10, 50); ctx.lineTo(90, 50); ctx.moveTo(50, 10); ctx.lineTo(50, 90); ctx.stroke(); // stroke only once, with the full path being traced
<canvas width=100 height=100></canvas>
Puede usar Path2D
y agregar todos sus segmentos a una ruta, luego hacer el trazo a esa ruta.
Aquí está su jsfiddle usando ctx.filter con mi recomendación.
const segments = [ [{x: 10, y: 50}, {x: 50, y: 50}], [{x: 50, y: 10}, {x: 50, y: 50}], [{x: 90, y: 50}, {x: 50, y: 50}], [{x: 50, y: 90}, {x: 50, y: 50}], ] let path = new Path2D() segments.forEach(segment => { path.moveTo(segment[0].x, segment[0].y) path.lineTo(segment[1].x, segment[1].y) }) const ctx = document.getElementById('my-canvas').getContext('2d') ctx.lineWidth = 5 ctx.filter = 'drop-shadow(-3px -3px 3px #f00)'; ctx.strokeStyle = 'black' ctx.stroke(path)
<canvas width="100" height="100" id="my-canvas" style="background: #00ff00"/>
Puedes leer más sobre Path2D
aquí:
https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D