w3.unpo<code>todo

Un caso práctico de globalCompositeOperation sería crear un efecto de mascara en <canvas>. En el siguiente ejemplo primero voy a crear un rectángulo y lo voy a rellenar con un gradiente radial que va desde opaco en el centro a totalmente transparente en el borde.
En este caso el rectángulo será la imagen de destino ( destination image ) – o sea la imagen ya existente en el <canvas> cuando empezamos a dibujar de nuevo.

  // un gradiente radial que va desde opaco en el centro a totalmente transparente en el borde
  var grd = ctx.createRadialGradient(125, 125,0, 125, 125, 120);
  grd.addColorStop(.65,"rgba(0,0,0,1)");
  grd.addColorStop(1,"rgba(0,0,0,0)");
  //rellenar un rectángulo con el gradiente radial creado anteriormente
  ctx.fillStyle = grd;
  ctx.beginPath();
  ctx.fillRect(0,0,cw,ch);

A continuación utilizo globalCompositeOperation. Esto modifica el contexto del <canvas> y todo lo que voy a dibujar después aparece SOLO ENCIMA de la imagen existente ( el rectángulo ). Es más, encima de las zonas transparentes y semitransparentes del rectángulo la imagen que viene a continuación lo será también.

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

Finalmente voy a restaurar el contexto a su valor inicial. Esto no es muy necesario en este caso, pero puede ser absolutamente necesario si queremos continuar a dibujar en el <canvas>.

ctx.globalCompositeOperation = "source-over";

Vea este ejemplo en codepen:

See the Pen Efecto mascara en canvas*** by Gabi (@enxaneta) on CodePen.