Create HTML canvas graphics without writing code | Hacker News Reader

Create HTML canvas graphics without writing code

2 pointsVBproDev1 comment

I was recently working on an open source project here- https://github.com/VBproDev/Canvascript that allows you to simply draw on a canvas and then get the code to render it on a actual HTML5 canvas. I am open to feedback and suggestion, you can find it here- https://vbprodev.github.io/Canvascript/

View on HN

1. When you submit things to HN it's better to submit the link as a link, instead of text. That way the link is actually clickable.

2. Your "Redo" button/functionality is usually called "Undo".

3. With only lines available, the usefulness of this seems pretty limited. It needs arcs and circles and boxes.

4. The lack of visual feedback as to how the line you're currently drawing -while you drag the mouse- is going to look, makes it hard to draw things with precision.

5. For the type of thing this is, it would probably be more useful to have a snap grid. It is more restrictive but allows better precision.

6. When you don't drag but just click, nothing is visibly added to the drawing, but it still generates a pair of ctx.moveTo(359, 259); ctx.lineTo(359, 259); each time. Someone trying it for the first time is bound to click a few times before understanding they should click-and-drag.

7. There's no indication or explanation at all about what the "Save" button actually does or its purpose.

7.b. I know it saves to localStorage but then again, since there's no way to explicitly recover a saved drawing from localStorage the feature seems mostly useless. If you "reset", localStorage is cleared. If you leave the page without saving just before going away, it is also cleared. The only way it seems useful is if you a. explicitly save b. immediately close browser tab/window without drawing more c. reopen it. But then again, having no explanation at all about what it does or how it works, there's little chance of discovering this casually.

8. There's really no need for a "Generate" button. You could just generate the code every time a line is added, and colour or width changed.

9. When the "Set" button is clicked, you should first check that width and height are filled to avoid resizing to 0x0

10. Instead of having to copy only the array and then opening the page and pasting the array in a different box, you could probably make it better by copying a complete URL that includes the drawing in it. It's easier to share a single link than saying "hey, click this link and then go to this box and paste these numbers".

Reply on news.ycombinator.com