Thanks for your question! You're very close.
To get the masker to properly mask the white box, you need to make the white box itself "masked." To do that, add the following line of code:
this.whiteBox.makeMasked(nc.masks.MainMask);
This will display the bottom-left corner of the white box.
By default, a mask only displays what is being masked — essentially, the portion that is covered by the mask. However, if you want the mask to hide the area it covers, revealing the remaining visible area of the object (in this case, the white box), you can invert the mask.
To do this, pass the optional invertMask
parameter as true
to the makeMasked()
function:
this.whiteBox.makeMasked(nc.masks.MainMask, true); // true = invert mask, show what is NOT covered
The first version (makeMasked(nc.masks.MainMask)
) will display only the part of the white box that is covered by the mask.
The second version (makeMasked(nc.masks.MainMask, true)
) inverts the mask so that the area outside the mask is visible, and the area inside the mask is hidden.
Let me know if you need further clarification!