drawImage на холсте из видеокадра изменить оттенок

Я написал простой скрипт, который берет кадр из видео и рисует его на холсте. Моя проблема в том, что цвета меняются между видео и нарисованным изображением.

Я поставил здесь результат рядом с оригиналом, чтобы было легче видеть. Оригинал-слева. Кажется, это более заметно в браузере chrome btw. Весь тест, который я сделал на OSX.

здесь фрагмент, холст слева, видео на справа:

 // Get our mask image
var canvas = document.querySelector(".canvas");
var video = document.querySelector(".video");

var ctx = canvas.getContext('2d');
function drawMaskedVideo() {
  ctx.drawImage(video, 0, 0, video.videoWidth/2, video.videoHeight, 0,0, video.videoWidth/2,  video.videoHeight);
}

requestAnimationFrame(function loop() {
  drawMaskedVideo();
  requestAnimationFrame(loop.bind(this));
});

html, body {
  margin: 0 auto;
}
.video, .canvas {
  width: 100%;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
}

<video class="video" autoplay="autoplay" muted="muted" preload="auto" loop="loop">
    <source src="http://mazwai.com/system/posts/videos/000/000/214/original/finn-karstens_winter-wonderland-kiel.mp4" type="video/mp4">
</video>
<canvas class='canvas' width='1280' height='720'></canvas>

Я хотел бы знать, почему это происходит, и если можно избавиться от него в кросс-браузере ?

вот простой скрипт, я писал:

let video = document.querySelector('#my-video') // .mp4 file used
let w = video.videoWidth;
let h = video.videoHeight;
let canvas = document.createElement('canvas');
    canvas.width  = w;
    canvas.height = h;
let ctx = canvas.getContext('2d');

ctx.drawImage(video, 0, 0, w, h)

document.querySelector('.canvas-container').appendChild(canvas);