How clear rect in GraphicsContext of SwifUI

Question

In My example, I draw a rect use GraphicsContext.

Canvas { context, size in
    context.fill(
        Path(CGRect(
            x: 0,
            y: 0,
            width: 300,
            height: 200
        )),
        with: .color(.green))
}
.frame(width: 300, height: 200)

Now, I want clear the rect, but not found the clear api in GraphicsContext, how clear the rect?

I try to fill another Color.clear rect overlap the green rect, but not clear rect.

context.fill(
    Path(CGRect(
        x: 0,
        y: 0,
        width: 300,
        height: 200
    )),
    with: .color(.clear))

Answer 1

You can use blendMode to copy the color you are trying to apply. See the following code:

context.blendMode = .copy
context.fill(
    Path(CGRect(
        x: 0,
        y: 0,
        width: 300,
        height: 200
    )),
    with: .color(.clear))
context.blendMode = .normal

We first set the blend mode to copy so that the oncoming color is copied directly to context without doing any computations. We then need to reset the blend mode back to normal.

This seems to work correctly at least for my test case. But you are absolutely right. There are chunks of API missing. What I am personally missing for this case is actually saveGState and restoreGState. These can push-pop your settings on context so that when you restore it you know you have restored settings to what was previously set. Now in our code we just assume that we need to revert blend mode back to .normal.