帆布填充和drawimage组合不起作用

Question

正如您在下面的代码中看到的，我添加了一个名为＆＃34; red_rec＆＃34;在img和图像变量下方，因为我需要一个红色矩形，颜色躲闪混合应用于两个图像，我的意思是（globalCompositeOperation =＆＃34; color-dodge＆＃34;） 但是将它与两个图像变量一起运行只会使图像和混合消失，我不知道我做错了什么。

所以作为简历...我想要一个带有globalCompositeOperation =＆＃34;颜色闪避＆＃34;的红色矩形与两个图像混合。

＆＃13;

＆＃13;

var canvas = document.getElementById("header_photo");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
ctx.globalCompositeOperation = "source-over";

var img = new Image();
img.onload = loadHandler;
img.src = "https://i.stack.imgur.com/Ut7Wk.jpg";

var images = new Image();
images.onload = loadHandler;
images.src = "https://i.stack.imgur.com/Yfi8y.jpg";

var black_texture = new Image();
black_texture.onload = loadHandler;
black_texture.src = "http://pre07.deviantart.net/166f/th/pre/f/2008/287/8/9/black_texture___ray_by_ethenyl.jpg";

//I WANT TO ADD THIS RED RECTANGLE WITH COLOR DODGE BLEND MODE (ctx.globalCompositeOperation = 'color-dodge';)

var red_rec = ctx.createLinearGradient(0, 0, 0, 100);
red_rec.onload = loadHandler;
red_rec.addColorStop(0, "red");
red_rec.addColorStop(1, "transparent");
ctx.fillStyle = red_rec;
ctx.fillRect(50, 0, 40, 100);


var loaded = 0;
function loadHandler(){
   if(++loaded == 4){
      start();
     }
   }

function start() {
  var c1 = scaleIt(img, 1);
  var c2 = scaleIt(images, 1);
  var c3 = scaleIt(black_texture, 1);
  canvas.width = c1.width / 1;
  canvas.height = c1.height / 1;
  ctx.drawImage(c1, 0, 0);
  ctx.globalCompositeOperation = 'overlay';
  // here don't resize the main canvas, but use drawImage sizing options
  ctx.drawImage(c2, 0, 0, c1.width, c1.height);
  ctx.globalCompositeOperation = 'luminosity';
  ctx.globalAlpha = 0.31;
  ctx.drawImage(c3, 0, 0, c1.width, c1.height);
  
}

function scaleIt(source, scaleFactor) {
  var c = document.createElement('canvas');
  var ctx = c.getContext('2d');
  var w = source.width * scaleFactor;
  var h = source.height * scaleFactor;
  c.width = w;
  c.height = h;
  ctx.drawImage(source, 0, 0, w, h);
  ctx.globalCompositeOperation = 'source-out';
  return (c);
}

＆＃13;

html,
body {
  height: 100%;
  overflow-x: hidden;
}
header {
  width: 100%;
  height: 100%;
}
header #header_photo {
  width: 100%;
  height: auto;
  position: absolute;
  opacity: 1;
}

＆＃13;

<header>
  <canvas id="header_photo"></canvas>
</header>

＆＃13;

＆＃13;

＆＃13;