Canvas - gradient flash and mask

Question

I want to get the effect "flash/flashlight". But with the ability to merge multiple effects.

I draw one effect like this, but can not merge them.

function createCircle( x, y ) {
    var gradient = context.createRadialGradient(x, y, 0, x, y, 100);
    gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
    gradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
    context.fillStyle = gradient;
    context.fillRect(0, 0, width, height);
}

I tried different types of "globalCompositeOperation". But the result was still bad.

I attached an image (example) with the desired result.

enxaneta · Accepted Answer · 2018-11-21T16:48:18.607

Is this what you need? I've used globalCompositeOperation as you intended. please take a look at this codepen example

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 600,
  cx = cw / 2;
let ch = canvas.height = 300,
  cy = ch / 2;
let img = document.getElementById("img");

function grd( x, y ) {
    let gradient = ctx.createRadialGradient(x, y, 0, x, y, 130);
    gradient.addColorStop(.5, 'rgba(0, 0, 0, 1)');
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
    return gradient;
}

let c1={x:220,y:150}
let c2={x:380,y:150}

ctx.fillStyle = grd(c1.x,c1.y);
ctx.beginPath();
    ctx.arc(c1.x, c1.y, 220, 0, 2*Math.PI);
    ctx.fill();
ctx.fillStyle = grd(c2.x,c2.y);
ctx.beginPath();
    ctx.arc(c2.x,c2.y, 220, 0, 2*Math.PI);
    ctx.fill();

ctx.globalCompositeOperation = "source-in";
ctx.drawImage( img, -50, -50 ,cw, cw );

body {

  overflow: hidden;
}
canvas {
  background-color: #000;
  display: block;

}

<canvas id="canvas">
  <img src="your_image.jpg" id="img" />
</canvas>

Good option, but it does not work with "requestAnimationFrame". I see background color. — Serhii, Nov 21 '18 at 20:47
Please show me your code where you need `requestAnimationFrame` — enxaneta, Nov 21 '18 at 21:12
I understood the reason. For function "draw" it was necessary to add at the beginning "save" and "restore" at the end. Thanks. — Serhii, Nov 23 '18 at 07:14

Canvas - gradient flash and mask

1 Answers1