ClipTo с изображением и фоном Изображение

Question

Я пытаюсь закрепить изображение с другим изображением в холсте ткани с фоном, я стараюсь следовать примеру here.

Но когда я добавляю backgroundColor в первых строках отсечение не работает больше:

var canvas = new fabric.Canvas('divPad', { 
    width: $("#divPad").width(), 
    height: $("#divPad").height(), 
    backgroundColor:'yellow', 
}); 

Может кто-нибудь мне помочь?

Answer 1

Не может работать. Вы не обрезаете, а играете с глобальной композитной работой в режиме «soruce-atop». Это означает, что ваше изображение будет нарисовано только на части холста, где нечто отличное от прозрачного.

Если вы положили сплошной цвет в качестве фона, это больше не может работать.

Одно решение может иметь div под холстом и сделать div желтым, а не самим холстом.

Или вы могли бы попытаться получить форму своего изображения и сделать какое-то реальное обрезание вместо глобального композитинга.