Canvas DrawLine not Smooth

Bugs and Other Issues
,
#1

Dear community,

When I try to draw quick scribble lines using canvas' DrawLine block, the curves of the scribble are not smooth. The distance between PrevX/Y and CurrentX/Y is very big (in 10s of millimeters) and thus, the curves appear as a polygon rather than a smooth curve. I am not sure why the distance between two consecutive points is so big. I have also tried to add a DrawCircle along with DrawLine in the Canvas Dragged block. This has smoothened the line edges but at the turning points this not curved, rather there are sharp angular turns.

This bug is troubling me a lot. I am trying to build a drawing app. But, these polygon shaped lines look very annoying. Please help.

Thanks a lot in advance.

Soumya

What do you use to draw lines in canvas?
#2

In order to create a smoother line try the following code

image
image863×454 43.3 KB

1 Like
In PaintPot the DrawingCanvas.Dragged produce a thick fan-like line
How i can draw line?
#3

https://groups.google.com/g/mitappinventortest/c/zu5E9OvQKs4/m/Hp2l-KZHDQAJ might help. and https://groups.google.com/g/mitappinventortest/c/u3g4NuHjKb8/m/1gljCmrvHQAJ

image

#4

Thanks dora_paz, I have tried this same sequence. but of no use. The line is still not smooth at curves.

Screenshot_20210110-015226
Screenshot_20210110-0152261080×2160 154 KB

#5

With the above code this is how it looks in my phone from an app I made

image
image720×1280 139 KB

#6

You have to draw with points, not lines

#7

Hi Patryk, I didnt get you. The way to draw curve is using drawline. The Points are scattered and dont join as a single curve. Please share an example block code, if you can. Thanks

#8

Dear dora_paz, I am not sure how fast are you drawing. Please look at my scribbles, The above one is slower and is much smoother as compared to lower one. I drew the lower curve faster and the curve got distorted. The lesser the linewidth the uglier it looks.

Please see if you have any solution to that. I cant expect my app users to always draw slower.

#9

Screenshot_20210110-021440
Screenshot_20210110-0214401080×2160 217 KB

#10

It doesn't look good by points. I don't think you can help it. Canva is too slow, with fast movements it won't have time to read all the intermediate points and then it draws straight lines.

#11

Yes Patryk. I understand this point. But my points are appearing bit too farther. Any way to make sure that canvas picks closer points to draw a line. Thanks.

#12

It will not pick any closer points because it cannot "see" them in fast movements. But do you need such fast movements? With normal drawing, it is fine. Quick movements are scratching, and when you crinkle, the shape is probably not important;)

#13

Did anyone mention setting sizing to responsive? Apparently this can help...

#14

Responsive is the default in app inventor. With fast movements, both responsive and fixed it creates straight lines. Straight lines appear jagged only in fixed mode.

#15

Doesn't mean that a developer won't change it to Fixed, then get unexpected results...

#16

The sizing is set to Responsive. I haven't changed it.

#17

as @dora_paz said

blocks (42)
blocks (42)1150×408 49.9 KB

do this and also try increasing width it will be smooth

#18

sorry it might not work with what i posted but read

Help With Drawing app Line Width Problem

#19

Hi HIFI_APPS, I have looked at this post also. The curves are shaky and not smooth. Thanks

#20

In my little tryout of a doodle app, the curves are not completely smooth, but close enough.
If you really, really! need very smooth curves, you should keep a list of the points you go through on the canvas and use Bezier curves through these points. In JavaScript there are enough examples for this which you could use as an example, or write an extension, or maybe someone wrote one that you could use.
But my advice would be: live with it. If that is not an option, learn Java.