Помогите разобраться с mask в html5 canvas

Кусочек кода:

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(level1, 0, 0);
ctx.save();
ctx.fillRect(0,0,mask.width,mask.height);
ctx.globalCompositeOperation="source-in";
ctx.drawImage(hero,0,0);
ctx.restore();

Пытаюсь сделать маску для героя. Но получается вот такой глюк.

Структура такая:

1) Слой backgorund прописанный в css (его мы видим).

2) Backgorund уровня в html5 canvas там леса, трава под ногами (не отображается).

3) Маска для Hero.

4) Сам Hero.

Ожидание: background c травой и с вырезанным героем.

Реальность: маска работает, но срезает backgorund of canvas.

Похоже, что ctx.globalCompositeOperation="source-in"; распространяется на весь context, а не на добавленные слои. Подскажите, пожалуйста как можно исправить? Может быть надо в отдельном контексте это всё рисовать?