Background image color detection with Android Paint

Issue

When I start painting , it colors the whole background , I mean it should only paint the white spots. Application screenshot is as follows. Using Android Paint ,I want to paint only white spots on background-drawable[Panda] and skip any other color.

onDraw() function is:

protected void onDraw(Canvas canvas) {

    canvas.drawPath(path, paint);
    canvas.drawPath(circlePath, circlePaint);

    for (Pair<Path,Integer> path_clr : path_color_list ){
        paint.setColor(path_clr.second);
        canvas.drawPath( path_clr.first, paint);
    }

    for (Pair<Path,Integer> path_clr : circular_path_color_list ){
        circlePaint.setColor(path_clr.second);
        canvas.drawPath( path_clr.first, paint);
    }
}

and onTouchEvent function is:

public boolean onTouchEvent(MotionEvent event) {

    float pointX = event.getX();
    float pointY = event.getY();
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        circlePath.reset();
        path.moveTo(pointX, pointY);

        return true;
    case MotionEvent.ACTION_MOVE:
        path.lineTo(pointX, pointY);
        circlePath.reset();
        circlePath.addCircle(pointX, pointY, 10, Path.Direction.CW);

        break;

    case MotionEvent.ACTION_UP:
        circlePath.reset();

        break;
    default:
        return false;
    }

    postInvalidate();
    return true;
}

Solution

The thing you're describing is called masking. You need a mask (white areas) and a masked image (your strokes). When drawing, you have to use the mask to cut your strokes to a shape of the mask. It can be done using PorterDuff modes. See the pseudocode:

Bitmap panda;
Bitmap whiteAreas;
Bitmap strokes;
Canvas strokesCanvas;
Paint paint;

private void init() {
    strokesCanvas = new Canvas(strokes);
    paint = new Paint();
}

private void addStroke(Path stroke){
    paint.setXfermode(null);
    strokesCanvas.drawPath(stroke,paint);
    invalidate();
}

@Override
public void draw(Canvas canvas) {
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    strokesCanvas.drawBitmap(whiteAreas,0,0,paint);
    paint.setXfermode(null);
    canvas.drawBitmap(panda,0,0,paint);
    canvas.drawBitmap(strokes,0,0,paint);
}

See the link for more info: http://ssp.impulsetrain.com/porterduff.html

---

EDIT: Here's an image how it works. Blue areas should be transparent. Multiplication between the mask and the strokes is what's called masking.

Answered By - Zielony