Path/Line, Polygon and Rect Tool Guide

[tahirSmartboy]

Hi @programonaut,
This is a very nice drawing app of starters who want to learn the basics of html canvas.
I loved developing this with the help of your Blog.
One thing i am not able to figure out is how can i add guides while using the Path/Line, Polygon and Rect tool.
I will be grateful if you help me with this.
Thank You

[programonaut]

Hi @tahirSmartboy,
I am really happy to hear that!
I guess with guides, you mean a "preview" of the element you are currently drawing?
If so, I would suggest trying to create another canvas on top of the old one and draw the preview there :)

I hope that helps already, if not send me another message and I will try to create a little example :)

[tahirSmartboy]

Hey @programonaut
Thank you for the reply. Yes by guides i mean the "preview" of the element i am currently drawing.
I have tried your solution and i had successfully created the canvasCopy on top of the main canvas.
I have also tried to draw over the canvasCopy but with this it behaves weird. By weird i mean it fills the copy canvas with multiple lines.
This is how it looks.

Screen.Recording.2022-10-26.at.12.09.41.PM.mov

May be i am doing something wrong.
It would be of great help if you share an example of how to do it :)

Thank You

[programonaut]

Hi @tahirSmartboy,
sorry for the late reply, but I finally found time to have a look at it myself.
In #2, I created a pull request that contains an example for the line tool. When you click on 'Files changed' you can see what I changed for it to work.
You can now use this solution and extend it for the polygon tool, and so on! :)

In case you have any other questions, feel free to ask!

[programonaut]

I think the main thing you are missing in your current version is to clear the preview canvas in between the redraws :)

[tahirSmartboy]

Hey @programonaut, Sorry for the late reply. Been buzy on a different project. I loved your soulion of the preview canvas. It works like a charm. I tried and implemented it for the path tool. I'll also do this for the polygon and rect tool. I'll update you when I am able to successfully do it. If incase something I cannot figure out I'll let you know.

Thank you for the help :)
I am grateful <3