canvas fillrect and drawimage combination doesn't work

问题

As you see on the code below I added a fillrect called "red_rec" below the img and images variables, because I need a red rectangle with color-dodge blending applied to the two images, I mean (globalCompositeOperation = "color-dodge") but running it along with the two images variables just makes dissapear both images and blend, I don't know what I am doing wrong.

so as a resume... I Want a red rectangle with globalCompositeOperation = "color-dodge" blending with the two images.

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);
}

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

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

来源：https://stackoverflow.com/questions/41510240/canvas-fillrect-and-drawimage-combination-doesnt-work

标签

javascript

html

css

canvas