Неправильная вырезка холста в Google Chrome

Question

Я пытаюсь обрезать холст с помощью JavaScript, он корректно работает в Mozilla Firefox, но в Google Chrome есть ошибка рендеринга (не то же самое). Как я могу это исправить? Или что я делаю не так?

Вот мой код: https://jsfiddle.net/xranto/hmrx52nv/

JS:

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

var img = document.createElement('IMG');

img.onload = function () {
    ctx.save();                             
    ctx.beginPath();
    ctx.moveTo(31, 145);
    ctx.lineTo(206, 200);
    ctx.lineTo(303, 57);
    ctx.lineTo(469, 378);
    ctx.lineTo(133, 538);
    ctx.closePath();                
    ctx.clip();                     
    ctx.drawImage(img, 0, 0);                               
    ctx.restore();
}


img.src = "http://i.imgur.com/fHaQvTc.jpg";

HTML:

<canvas id="c" width="495" height="654"></canvas>

Сравнение рендеринга

Версия Mozilla: 43.0.1 - версия Chrome: 50.0.2661.87 м

Answer 1

Задача решена,

вместо:

ctx.closePath();                
ctx.clip();                     
ctx.drawImage(img, 0, 0);                               
ctx.restore();

Я использую:

ctx.closePath();                
ctx.fill();     
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(img,0, 0);

Спасибо всем!!!