Работа с сложными фигурами(элементами), есть идеи?

Что бы понять о чём я буду писать ниже вот скришот для ознакомления с задачей c2n.me/3gF4B4g.jpg

И так задача следующая:
У нас есть 2 элемента background #1 и background #2 они наезжают на изображение MAIN IMAGE, по клику на "CTC MEDIA" они разъезжаются background #1 вверх и background #2 вниз и изображение остаётся одно на "сцене".

Что же не получается сделать спросите Вы?!
А следующее:
Кривые формы у background #1 и background #2, с учётом того что это не img и не background, а фон реализованный при помощи geometryangle.js с данным скриптом вы так же можете ознакомиться тут www.jqueryscript.net/other/jQuery-Plugin-To-Create...
Скрипт "рендерит" 3-мя способами svg / canvas / webgl, я в свою очередь выбрал canvas т.к. он даёт самую минимальную нагрузку.
В html выглядит это так: c2n.me/3gF7jcR.png (пример одного из background ).

Что я пробовал:
1. Маска CSS clip-path (но не подходит не работает в мазиле и опере)
2. SVG clip-path (canvas контейнер не хочет реагировать на её)

И так дорогие друзья, может у кого то есть хоть какие то идеи, уже 3-ий день не могу ничего придумать, google и друзья молча делают удивлённые глаза :)