Hey there! Let's break down how to customize the color of intersection areas between shapes and text in Android Canvas, including fixing your current background compatibility issues and achieving multi-shape overlap effects.

1. Core Concepts to Grasp First #

Before diving into code, you need to understand two foundational ideas:

• Canvas Layer Stacking: Every draw operation (shape, text, bitmap) stacks on top of previous content. The existing canvas content is called the DST (Destination) layer, and the content you're about to draw is the SRC (Source) layer.
• PorterDuffXfermode: This defines how SRC and DST pixels blend. Each mode uses a mathematical formula to calculate the final color of overlapping pixels.

Your current SRC_OUT mode works like this: It keeps parts of the SRC that don't overlap with the DST, and makes overlapping areas transparent. The issue with changing background colors comes from drawing directly on the main canvas—this makes the Xfermode interact with the background instead of just your shapes/text.

2. Fix Your Current Effect (Background Color Compatibility) #

To make your original effect work with any background color, use an off-screen Bitmap layer to isolate shape-text blending from the main canvas. Here's the step-by-step implementation:

Step 1: Create an Off-Screen Buffer #

First, make a separate bitmap and canvas to draw your elements without affecting the main background:

// Get your view's dimensions
val width = view.width
val height = view.height

// Create off-screen bitmap and canvas
val offscreenBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
val offscreenCanvas = Canvas(offscreenBitmap)

Step 2: Draw Base Elements (DST Layer) #

Clear the off-screen canvas, then draw your base shape (e.g., white circle):

// Clear off-screen canvas to transparent
offscreenCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)

// Paint for white circle
val circlePaint = Paint().apply {
    color = Color.WHITE
    isAntiAlias = true
}
// Draw circle in the center
offscreenCanvas.drawCircle(width/2f, height/2f, 100f, circlePaint)

Step 3: Apply Xfermode and Draw Text (SRC Layer) #

Set the SRC_OUT mode and draw your text. To get your desired effect (circle overlap = background color, text overlap = white), we'll add a second layer for the white overlapping text:

val text = "Hello Canvas"
val textBounds = Rect()

// Layer 1: Black text with SRC_OUT (creates transparent holes in the circle where text is)
val blackTextPaint = Paint().apply {
    color = Color.BLACK
    textSize = 60f
    isAntiAlias = true
    xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_OUT)
    getTextBounds(text, 0, text.length, textBounds)
}
val textX = (width - textBounds.width())/2f
val textY = height - textBounds.height() - 20f
offscreenCanvas.drawText(text, textX, textY, blackTextPaint)

// Layer 2: White text, only keep overlapping parts with the circle
val whiteTextLayer = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
val whiteTextCanvas = Canvas(whiteTextLayer)
whiteTextCanvas.drawCircle(width/2f, height/2f, 100f, circlePaint) // DST = white circle

val whiteTextPaint = Paint().apply {
    color = Color.WHITE
    textSize = 60f
    isAntiAlias = true
    xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN) // Only keep text overlapping with circle
}
whiteTextCanvas.drawText(text, textX, textY, whiteTextPaint)

Step 4: Merge Layers onto Main Canvas #

Finally, draw everything onto the main canvas with your desired background:

// Draw your preferred background color first
canvas.drawColor(Color.DARK_GRAY)

// Draw the circle + black text layer
canvas.drawBitmap(offscreenBitmap, 0f, 0f, null)
// Draw the white overlapping text layer
canvas.drawBitmap(whiteTextLayer, 0f, 0f, null)

This setup works with any background color—no more invisible text or black shapes!

3. Achieve Multi-Shape Overlap (Circle + Rectangle + Text) #

To set all overlapping areas (shape-shape, shape-text, all three) to a specific color (e.g., white), use layered masking:

Core Idea #

1. Draw all base shapes (circle + rectangle) in one layer.
2. Create a text layer, then mask it to only keep parts overlapping with the base shapes.
3. Create a color layer for overlaps, then mask it to only keep areas where all elements intersect.
4. Merge all layers onto the main canvas.

Step-by-Step Code #

val width = view.width
val height = view.height
val text = "Hello Multi-Shape"
val textBounds = Rect()

// 1. Base layer: Draw white circle + rectangle
val baseLayer = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
val baseCanvas = Canvas(baseLayer)
baseCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)

val shapePaint = Paint().apply {
    color = Color.WHITE
    isAntiAlias = true
}
// Draw top rectangle
baseCanvas.drawRect(50f, 50f, width-50f, 150f, shapePaint)
// Draw middle circle
baseCanvas.drawCircle(width/2f, height/2f, 100f, shapePaint)

// 2. Text layer: Draw black text, mask to only overlap with base shapes
val textLayer = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
val textCanvas = Canvas(textLayer)
textCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)

val textPaint = Paint().apply {
    color = Color.BLACK
    textSize = 60f
    isAntiAlias = true
    getTextBounds(text, 0, text.length, textBounds)
}
val textX = (width - textBounds.width())/2f
val textY = height - textBounds.height() - 20f
textCanvas.drawText(text, textX, textY, textPaint)

// Mask text to only show where it overlaps with base shapes
val srcInPaint = Paint().apply {
    xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
}
textCanvas.drawBitmap(baseLayer, 0f, 0f, srcInPaint)

// 3. Overlap color layer: Create white layer, mask to only show all intersections
val overlapLayer = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
val overlapCanvas = Canvas(overlapLayer)
overlapCanvas.drawColor(Color.WHITE) // Your desired overlap color

// Mask to only keep areas with base shapes
overlapCanvas.drawBitmap(baseLayer, 0f, 0f, srcInPaint)
// Mask again to only keep areas with text
overlapCanvas.drawBitmap(textLayer, 0f, 0f, srcInPaint)

// 4. Merge all layers on main canvas
canvas.drawColor(Color.BLACK) // Background color
// Draw base shapes (non-overlapping parts stay white)
canvas.drawBitmap(baseLayer, 0f, 0f, null)
// Draw non-overlapping text parts (black)
val dstOutPaint = Paint().apply {
    xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)
}
canvas.drawBitmap(baseLayer, 0f, 0f, dstOutPaint) // Erase shape areas from text
canvas.drawBitmap(textLayer, 0f, 0f, null)
// Draw all overlapping areas (white)
canvas.drawBitmap(overlapLayer, 0f, 0f, null)

Key Takeaways #

• Use off-screen layers: Always isolate Xfermode operations from the main canvas to avoid unintended background interactions.
• Test PorterDuff modes: Experiment with modes like SRC_IN, DST_IN, SRC_OUT to find the right blend for your effect.
• Break down complex effects: For multi-element overlaps, split the result into separate layers and combine them step by step.

内容的提问来源于stack exchange，提问作者Thracian