Существует ли в js механизм, позволяющий раздвинуть изображение в canvas как на картинке ниже, где красным изображено заполнение, а чёрным — границы canvas?
Вы не поняли, изображение уже сформировано. Это произошло до того, как стало известно по каким координатам его делить и смещать. И деление на 2 половины в примере -- это упрощение, а по факту нужно делить кривой линией на части неправильных геометрических форм.
Накидал пример через getImageData, putImageData.
P.S. Если будете рендерить изображения, они должны быть на вашем домене чтобы не столкнуться с проблемой Access-Control-Allow-Origin
