How do you draw with a transparent color on an Image?

MIT App Inventor Help
1

How can I draw with a transparent color on an existing image?
I'm using canvas with an image for drawing.

image
image918×570 50.1 KB

Saving that canvas and showing it as a picture.

image
image729×137 11.3 KB

My goal is to make the red drawing transparent in sted of red.

I tried to search for an extension to just change all red to a new transparent color but did not find a solution.
And whatever is drawn on an image in the canvas will always stay on top of that image...

Screenshot_20230421_083414
Screenshot_20230421_0834141080×2400 111 KB

The last image should show the green background color or whatever color is on the background.

Any ideas on how to solve this?

Thanks
Teddy

2

dont quite understand your goal
you mean to get this effect below?

1
11080×2400 67.3 KB

3

AFAIK, there is no straightforward way to do this. You could store the coordinates of the shapes drawn, and then redraw those shapes with the background color (which should appear to give that transparent effect), instead:

blocks (6)
blocks (6)812×52 10.4 KB

blocks (7)
blocks (7)1150×542 66.8 KB

blocks (8)
blocks (8)1112×570 68.2 KB

(these blocks are draggable)

4

Thanks, Nishyanth,
That would work with a solid background color (as in my description), but the image will not get a transparent property. As if I change the background to a picture.

1 Like
5

I want the user to draw on an existing image and to make that user-drawing transparent. The goal is the transparently not the color effect.

6

Take this! Play the gif :point_down:
saturn

Using 2 Canvases
Definetly meet your requrement :slight_smile: :slight_smile:
draw_transparently.aia (61.4 KB)

By the way do you like Saturn?:slight_smile:

7

:slight_smile: That's creative :slight_smile:
But it does not give the end result. An image with transparency.
Like, if you take a picture with a greenscreen background and change the greenscreen color to transparency.

8

You can do it programmatically, pixel by pixel. not with your finger.

9

oh i see
you may use some image-related extensions or other tricks to draw the transparent color!

10

@Teddy

I believe you will need to need to move your background image to the foreground (pixel by pixel), then remove the background. Then you can "paint" with a transparent colour, or apply masks.....

1 Like
11

Try this

1 Like
13

This sounds like a scratch card app.

1 Like
15

Taifun

16

@Juan_Antonio , This is exactly what I am looking for! Thanks.
Tried to find the extension, with no luck.
Please provide a link to where to obtain a download link/site.
Br. Teddy

17

Link to the extension: Extension ColorFilter image. Complementary color. Grayscale. Source code. Transparent color

18

although not what you asked for :wink:

19

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.