Something like Paint for svg (HTML, JavaScript)

Projects Personal Projects
1

I attempted to make something that has some of the features of MS Paint to draw an SVG, using a webpage and JavaScript.
I’ve only done some basic shapes so far. And I had create a version of click and drag to do those.
Here’s a link to the Codecademy workspace:
https://www.codecademy.com/workspaces/6353b2eeda720aa6a3769447

Its a work in progress so far.

Anyone have any comments or suggestions? If so, post a reply below.

3 Likes
2

Here are features I’m considering adding at some point in the future:

  • use CSS and HTML to make it look more like Paint
  • putting text inside the svg
  • changing the border/line [stroke] width
  • changing the size [dimensions] of the svg
  • an undo button and redo button
  • include making a polygon and “polyline”
  • include making curved lines
  • have code that turns the svg into a canvas element drawing.
  • have the webpage save the svg as an svg file (or maybe load an svg file from a user or elsewhere on the internet) if that’s possible.
3

Here’s part of it in codepen.io
link: https://codepen.io/jbazant100/pen/yLEeaJN

2 Likes
4

Do you think a “scribble” freedraw function is possible?

5

Probably not. There probably isn’t a good way to do that for an svg … because I’d have to define each scribble as a shape, or a path (and a handful of points defining the path or shape would have to be stored for each.)

That would likely work for a canvas element however, because that doesn’t use elements, and thus doesn’t store information in that way.

1 Like
6

Only problem with Paint, it’s not vector graphics, but bitmap. The two couldn’t be farther apart. Granted, we can reliably deploy lines, but they are not vectors, only graphical representations in 2D space, not that that even matters. Finding a way to connect the two paradigms would be the goal, as I see it. Looks like you’re on your way to do that, so kudos!

Part of the key in Paint would be to have it recognize endpoints in straight line segments. Do that so that lines can be reportedly connected and you’ve won the game. 3D, here we come!

2 Likes