Эффект холста фонарика со слоистыми изображениями

Question

Я пытаюсь создать эффект изображения, очень похожий на эффект Эффект фонарика Canvas , однако, вместо того, чтобы использовать передний слой просто как цвет, я бы хотел, чтобы он был изображением.Захватив код @Kaiido ответил, я пытаюсь изменить, но когда я помещаю шаблон в событие, это выдает мне ошибку.

// Find out window height and width
wwidth = $(window).width();
wheight = $(window).height();

// Place Canvas over current Window 
var ctx = document.getElementById("canvas"),
context = ctx.getContext('2d'),
img = new Image;
img.src = "http://i.imgur.com/bnAEEXq.jpg";

img.onload = function(){
  context.canvas.width = wwidth;
  context.canvas.height = wheight;

  // Paint the canvas black.
  context.fillStyle = context.createPattern(this, "no-repeat");
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  context.fillRect(0, 0, context.canvas.width, context.canvas.height);

  // On Mousemove, create "Flashlight" around the mouse, to see through the canvas
  $(window).mousemove(function(event){
    x = event.clientX;
    y = event.clientY;
    radius = 100;
    context = document.getElementById("canvas").getContext("2d");

    // first reset the gCO
    context.globalCompositeOperation = 'source-over';
    // Paint the canvas with the initial image.
    // context.fillStyle = context.createPattern(this, "no-repeat");
    context.fillStyle = "#ffffff";
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);

    context.beginPath();
    radialGradient = context.createRadialGradient(x, y, 1, x, y, 100);
    radialGradient.addColorStop(0, 'rgba(255,255,255,1)');
    radialGradient.addColorStop(1, 'rgba(0,0,0,0)');

    context.globalCompositeOperation = "destination-out";

    context.fillStyle = radialGradient;
    context.arc(x, y, radius, 0, Math.PI*2, false);
    context.fill();
    context.closePath();
  });
}

body {
    		margin: 0;
    	}
      #canvas {
        position:fixed; 
        top:0; 
        left:0;
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpg');
        background-size: cover;
        background-repeat: no-repeat;
      }

<canvas id="canvas"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

Вам нужно использовать img, назначенный вами ранее, а не this, когда вы звоните context.createPattern.

// Find out window height and width
wwidth = $(window).width();
wheight = $(window).height();

// Place Canvas over current Window 
var ctx = document.getElementById("canvas"),
context = ctx.getContext('2d'),
img = new Image;
img.src = "http://i.imgur.com/bnAEEXq.jpg";

img.onload = function(){
  context.canvas.width = wwidth;
  context.canvas.height = wheight;

  // Paint the canvas black.
  context.fillStyle = context.createPattern(this, "no-repeat");
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  context.fillRect(0, 0, context.canvas.width, context.canvas.height);

  // On Mousemove, create "Flashlight" around the mouse, to see through the canvas
  $(window).mousemove(function(event){
    x = event.clientX;
    y = event.clientY;
    radius = 100;
    context = document.getElementById("canvas").getContext("2d");

    // first reset the gCO
    context.globalCompositeOperation = 'source-over';
    // Paint the canvas with the initial image.
    context.fillStyle = context.createPattern(img, "no-repeat");
    //context.fillStyle = "#ffffff88";
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);

    context.beginPath();
    radialGradient = context.createRadialGradient(x, y, 1, x, y, 100);
    radialGradient.addColorStop(0, 'rgba(255,255,255,1)');
    radialGradient.addColorStop(1, 'rgba(0,0,0,0)');

    context.globalCompositeOperation = "destination-out";

    context.fillStyle = radialGradient;
    context.arc(x, y, radius, 0, Math.PI*2, false);
    context.fill();
    context.closePath();
  });
}

body {
    		margin: 0;
    	}
      #canvas {
        position:fixed; 
        top:0; 
        left:0;
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpg');
        background-size: cover;
        background-repeat: no-repeat;
      }

<canvas id="canvas"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

В качестве альтернативы, вы также можете использовать новые стрелки для сохранения контекста для ключевого слова this:

// Find out window height and width
wwidth = $(window).width();
wheight = $(window).height();

// Place Canvas over current Window 
var ctx = document.getElementById("canvas"),
context = ctx.getContext('2d'),
img = new Image;
img.src = "http://i.imgur.com/bnAEEXq.jpg";

img.onload = function(){
  context.canvas.width = wwidth;
  context.canvas.height = wheight;

  // Paint the canvas black.
  context.fillStyle = context.createPattern(this, "no-repeat");
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  context.fillRect(0, 0, context.canvas.width, context.canvas.height);

  // On Mousemove, create "Flashlight" around the mouse, to see through the canvas
  $(window).mousemove((event) => {
    x = event.clientX;
    y = event.clientY;
    radius = 100;
    context = document.getElementById("canvas").getContext("2d");

    // first reset the gCO
    context.globalCompositeOperation = 'source-over';
    // Paint the canvas with the initial image.
    context.fillStyle = context.createPattern(this, "no-repeat");
    //context.fillStyle = "#ffffff88";
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);

    context.beginPath();
    radialGradient = context.createRadialGradient(x, y, 1, x, y, 100);
    radialGradient.addColorStop(0, 'rgba(255,255,255,1)');
    radialGradient.addColorStop(1, 'rgba(0,0,0,0)');

    context.globalCompositeOperation = "destination-out";

    context.fillStyle = radialGradient;
    context.arc(x, y, radius, 0, Math.PI*2, false);
    context.fill();
    context.closePath();
  });
}

body {
    		margin: 0;
    	}
      #canvas {
        position:fixed; 
        top:0; 
        left:0;
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpg');
        background-size: cover;
        background-repeat: no-repeat;
      }

<canvas id="canvas"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>