search

saurabhdaware / text-to-handwriting

So your teacher asked you to upload written assignments? Hate writing assigments? This tool will help you convert your text to handwriting xD
https://saurabhdaware.github.io/text-to-handwriting/
MIT License
4.71k stars 1.13k forks source link

drawing canvas not working properly #71

Closed 0xkarambit closed 4 years ago

0xkarambit commented 4 years ago

Description of the bug the canvas is not fully usable. the space on top is not usable but instead the downwards part of the canvas is being drawn on but not being displayed.

To Reproduce Steps to reproduce the behavior:

  1. Click on the draw button.
  2. try to draw over the first like 100px of the drawing canvas.
  3. we cannot draw

Expected behavior we should be able to draw over that part of the canvas and not be able to draw over the bottom part of the canvas (the part that is not being displayed)

Desktop (please complete the following information):

saurabhdaware commented 4 years ago

Thank you for reporting, Harshit! Yes it has that 100px space from top.

This is happening because inside canvas, pointer changes to an image of the hand with a pen. To match the line with the pen point, I had to add some additional y-axis top value so that the line will match the point of the pen.

https://github.com/saurabhdaware/text-to-handwriting/blob/master/js/utils/draw.mjs#L34

Not really sure how we can solve this... Keeping this open if anyone has any idea.

Jobin-S commented 4 years ago

I am interested to work on this bug but where is this drawing canvas I can't find out that

saurabhdaware commented 4 years ago

Hi Jobin, the canvas is in "Draw (beta)" button.

In Code, the canvas is here: https://github.com/saurabhdaware/text-to-handwriting/blob/master/index.html#L504

Let me know if you need any help :D

Jobin-S commented 4 years ago

yes, can you provide some help or some outline of the error or something else from your idea?

Jobin-S commented 4 years ago

yes, can you please provide some help about how the drawing is doing to the canvas I search the file with the canvas id but I can't find where the drawing enables to it

saurabhdaware commented 4 years ago

So this is the line that adds dots to canvas https://github.com/saurabhdaware/text-to-handwriting/blob/master/js/utils/draw.mjs#L133

In the drawPoint function,This file has that +32 value which adds extra height to the output line. https://github.com/saurabhdaware/text-to-handwriting/blob/master/js/utils/draw.mjs#L34

That +32 value allows us to have an output line properly aligned with the pen in the icon. But because of that, the top 32pixels cannot be used. I am not sure what all ways are available to solve this.

Jobin-S commented 4 years ago

ok