Canvas Considerations and Workarounds


#1

While developing a custom color picker (which I will share when complete), I tripped over some unexpected canvas behaviors when drawing on a canvas and reading the background color at x,y coordinates.

In this post I am sharing some techniques for working with these aspects of canvas behavior.

In my #Discuss posting, Strange behaviors drawing on a canvas I posted four problematic behaviors, and a test app with a series of screen shots illustrating these problems. (Click here to go to that initial post). I also posted the test app itself there, so that you can see what I did, and also experiment yourself if you like.

This post shows how to work with and around these canvas behaviors.

Here is a short summary of the canvas behaviors that I had tripped over:
(1) Fractional x,y coordinates (I had thought that an ordinates would be an integer number of pixels).
(2) Drag is constrained by top and left canvas border, but, on the right and bottom, the user can drag totally off the canvas.
(3) If you do drag off the canvas, the background pixel color is “Transparent White” (255,255,255,0).
(4) Random alpha channel. The canvas background pixel color is usually picked up as opaque (alpha=255), but is occasionally picked up as translucent (with a random alpha channel number).

These are illustrated in my “Strange Behaviors When Drawing on Canvas” post. See that post for more details.

Here are my workarounds:

(1) I am treating fractional x,y coordinates as simply a phenomenon. They are not impacting me at the moment, but I would still appreciate an explanation from the developers.
(2) When drawing a line during a dragged event, draw it only as far as the edge of the canvas, using the technique that I demo in my test app, below.
(3) In addition to not drawing the line clear off the edge of the canvas, do not draw it all the way to the right or bottom edge of the canvas. Pixels on the edge of the canvas are also picked up as “transparent white”. (Don’t worry about the top or left edges; they behave as expected).
(4) If you expect the background pixel color to be opaque, then force it to opaque (substitute 255 for the alpha channel value).

Test App Code and Screenshots:

The original test app, and the screenshots that illustrate the problems, are shown in my “Strange Behaviors When Drawing on Canvas” posting on #Discuss.

Here is a new screenshot, showing that, with the workarounds added to the code, a dragged line drawing is confined to the canvas:

(Notice the random alpha channel – “239” instead of “255”. In the future, I will force it to “255”).

Here is the revised test app:


Instead of using the actual canvas width, I am using a variable “w”, which is just a tiny bit smaller than the actual canvas width. And “h” which is a tiny bit smaller than the height. This prevents drawing on the right or bottom canvas borders.

When I draw a line, I am constraining the x2,y2 value to a maximum of the adjusted width and height of the canvas (“h,w”).

In the code blocks, above, I haven’t yet forced the alpha channel value to 255, but I show where to do it via a comment.

I will try one more test:

The tests that I have done so far are with a canvas with a background color. I will also test it with a canvas with a background image. If you get to it first, kindly post your results.


Strange behaviors drawing on a canvas
#2

Thanks for helping the community! Nice topic!


#3

Hi dddiam, in app inventor canvas did you find out why x and y are fractional values, not integers ?