Canvas Image To Foreground

INTRO

Here I show how you can "move" a canvas background image to the foreground. This is done by getting the pixel colour of each pixel on the canvas background, saving this to a list, then drawing each pixel with that colour to the canvas.

Why do this? With the image in the background, all a user can do it draw over the top of it. With the image in the foreground, parts of the image can be modified, e.g. turned transparent. This opens up possibilities for creating image masks or shapes from the image, which can then be saved out to a new image. A sprite could carve out a shape as it moves across the canvas. You can have a different image in the background. If an image for the foreground is to be reused, the list may be easier to store and just write that. Many options....

Capturing the data for each pixel does take some processing time....in the example that follows I set the canvas to 150 x 150 pixels for a square image. This means there are 22,500 pixels to get data for, and then to write back. On my genymotion emulator on my computer, it took @ 4 seconds to capture the data and @ 3 seconds to write it. With bigger images you do get a better output resolution, but obviously process times will be longer. A 200 x 200 pixel canvas will have 40,000 pixels. This is why I used a clock timer, in order to be able to invoke the progress dialog. I set the progress dialog to close after the data capture, in order for you to be able to see the time it takes to write back (see the video). I tried generating the x,y list of pixels, then capturing the pixel colours, but this took twice as long as capturing the x,y and the pixel colours at the same time.

I also found that it was important to adjust the Canvas LineWidth to 1.3 to eliminate any lines between the pixels. This may require adjustment on different devices ?

An example aia project is available for download below.

BLOCKS

VIDEO

The idea is that you shouldn't really see too much difference in the before and after, apart from the white border, which I added to show that something had happened ;)

canvasfg.webm