Limit Canvas to a certain area?

Hello, I was wondering whether you can limit the canvas so you can only draw on a certain field. My background image has a white background and a graphic in the middle so I want the user to be able to only draw on the graphic and not the white surrounding it. Is there a way to implement this?

Thanks for every reply!

Apply something similar on your dragged block. It will be possible to draw from 50 to 150 pixels horizontally and vertically.


Have you done the exercises discussed in Creating Animated Apps ? They don't provide a specific solution; what they do show is how the Drawing Blocks work. A simple possible way might be to modify figure 17.3 (use the Touched Block to only work when the background color is not white).

One of these Blocks might be appropriate to restrict action to only areas of the Canvas that are not WHITE.

  • GetBackgroundPixelColor( x , y ) Gets the color of the given pixel, ignoring sprites.

  • GetPixelColor( x , y ) Gets the color of the given pixel, including sprites.

How to allow your code to Make Decisions will help program the required code..

Experiment and share with us the code you tried.

Very good idea with background color detection. Unfortunately background color detection does not work properly on canvas in appinventor. Its operation depends on the set resolution of the phone.

I do not agree Patryk. Set the Canvas size with pixels and the method works perfectly. :slight_smile:

I will look for the topic in which we tested it. Several PowerUsers made statements, including @ewpatton . Rather, no solution has been found. The topic was to create an array of color values for all pixels from the background.

I think depending on the screen resolution setting on the phone, there may be a few pixels of error in the color reading. There used to be no problem with this because the phones did not offer resolution change.

@CSB0512 Here is an example that works in the emulator or device provided the Canvas H and W are set in pixels..


It is impossible to draw in the white area. :slight_smile:

There is no problem selecting a pixel x,y, if the developer sets Canvas dimensions in pixels; even now when ScreenSizing is set to Responsive (as is done in the above example). If you use other H x W options, what you say is true.

Experiment and see for yourself. :slight_smile:

If you follow the link given above, you can see that the canvas was set in pixels. There was a small picture of 32x32. Canvas also set to 32x32. Unfortunately, the color table was not created correctly. Regardless of the settings in app inventor "responsive" or "fixed". What mattered was the resolution setting in the phone settings. I mentioned, the example provided here works! Did you try the example, it works in both my Android and emulator.

Here's a confirmation and an explanation:

I will try this example.

IgnoreWhitePixels.aia (159.1 KB)

The phone is set to HD + 1480x720

The phone is set to FHD + 2220x1080

The phone is set to WQHD + 2960x1440

The greatest accuracy is at the highest phone resolution. I guess then 1px = 1px. At lower resolutions, pixels are "squeezed", the color reading accuracy is no longer accurate.

That's great. The code answers CSBO512's question "I want the user to be able to only draw on the graphic and not the white surrounding it. Is there a way to implement this?"

The example seems to work exactly as advertised on your high resolution devices. Thanks for the images.

Yest, it is correct. Only depending on what resolution the users of his application will have, the end result may be unsatisfactory, as shown in the first picture. There are a few pixels of the error and we draw on the white field. But if we set a high resolution it is correct, only the battery disappears faster :wink: . Maybe someday MIT will fix it.

Thanks for testing. The 'resolution' might be slightly 'better' if Canvas.LineWidth is set to 1 instead of 3 as in the example. The results are very good and should satisfy anyone other than a graphic artist. You might want to try your experiment using 1 instead of 3; probably fewer outliers in the white area of the background image (which are all immediately adjacent to the pure White/image background color boundary).

Fix it. The Canvas works as described in the documentation when H and W are set in pixels. App Inventor will probably never be able to reproduce artist quality rendering and drawing. As it is, this is amazing it can do this. Want better, the professional Android Studio is the tool for the developer; AI2 Canvas works great for educational and experimental users.

As I understand it, App Inventor is using an early version Canvas because we wish to support early version Android.

It might be possible to use the HTML 5 Canvas in a Web Viewer component, depending on the requirements. In the case of colour-by-number, it probably could be done but would require a lot of Javascript code.