Trying to do a spotlight effect in android canvas

Question

I have a canvas and a simple bitmap for background image, fills the whole screen. I created a rect painted black and set it's alpha to 250 in order to make a "dark" effect on the background image. My aim to make a simple circle object that reveals the place it's hovering above. I tried thinking in many ways how to excecute it and failed.

I think the best way is to create a simple circle that manages to decrease the darkness alpha on the position it hovers above, but I have no idea how to do it.

The relevant part of my code:

private ColorFilter filter = new LightingColorFilter(Color.BLACK, 1);
private Paint darkPaint = new Paint(Color.BLACK), paint = new Paint(), paint2 = new Paint();//The style of the text and dark.

public DarkRoomView(Context context) {
        super(context);
        myChild = this;
        darkPaint.setColorFilter(filter);
                darkPaint.setAlpha(250);
        paint2.setAlpha(10);
        paint.setAlpha(50);
    }

private void loadGFX() {//Loads all of this view GFX file.
        backgroundImage = BitmapFactory.decodeResource(getResources(),                R.drawable.darkroomscreen);

        lightImage = BitmapFactory.decodeResource(getResources(), R.drawable.light);

    }

private void drawGFX(Canvas canvas) {
      canvas.drawBitmap(backgroundImage, 0, 0, paint2);//The backgeound image.
      canvas.drawRect(0, 0, WIDTH, HEIGHT, darkPaint);//The darkness.
      canvas.drawBitmap(lightImage, 50, 50, paint);//A spotlight.
}

Any ideas how I should get it done? Thanks!

Answer 1

For the spotlight, you could draw a circle of the original image over the darkness. You'd simply need to find the correct rectangle of the original image (based on where your finger is), and then draw a circle of that particular rectangle over the darkness. Trying to look "through" the darkness won't really get you anywhere; you need to place something over it.

Answer 2

By the time you draw the "spotlight", you've already darkened the image with the rectangle. It would be difficult to recover information lost during that draw.

A more flexible approach would be to draw a dark rectangle with a spotlight in a separate image (that is, compose the "darkness" and spotlight alpha and color mask image first), and then draw that mask image on top of the background as a separate step. This would also let you easily do things like eg give the spotlight fuzzy borders.