https://github.com/funnyboy-roks/drawing

A (mostly testing) site that allows one to draw onto an svg using their mouse with some configuration for the pen that they are using.
https://github.com/funnyboy-roks/drawing

drawing html javascript svg vanilla-javascript vanilla-js web-development

Last synced: about 2 months ago
JSON representation

A (mostly testing) site that allows one to draw onto an svg using their mouse with some configuration for the pen that they are using.

• Host: GitHub
• URL: https://github.com/funnyboy-roks/drawing
• Owner: funnyboy-roks
• License: other
• Created: 2023-11-18T18:02:16.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-21T20:43:20.000Z (about 1 year ago)
• Last Synced: 2023-11-21T21:38:15.638Z (about 1 year ago)
• Topics: drawing, html, javascript, svg, vanilla-javascript, vanilla-js, web-development
• Language: JavaScript
• Homepage: https://gh.funnyboyroks.com/drawing/
• Size: 6.84 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Drawing

This is a (mostly testing) site in which you can draw using your mouse.

There is minimal configuration for what pen you use and controlling some

of the strokes.

## Controls

When in "draw" mode, one can draw by using their left mouse button.  One

can erase points by holding right mouse button and erase strokes by

holding down both right and left mouse buttons.

When in "select" mode, one can move a stroke by clicking and dragging on

it.  Once can also change the weight and colour of a stroke by selecting

it and moving the sliders with the stroke.

## How it works

When you start drawing, it creates a `polyline` svg element on the

screen, adding points to the line as you move your mouse cursor.  Each

movement of the mouse is broken up into 5 pixel long sections to help

with erasing later.

The point eraser takes away all points near the eraser by splitting the

`polyline` into two new `polyline` elements.

The stroke eraser simple removes the element if the eraser is near any

of the points.