1. Drawing Fx
2. UI / Mobile Support
3. Un-dos(Re-do)

1. Rectangle / Square
2. Ellipse / Circle
3. Straight line
4. Pencil / Brush
5. Fonts
6. Eraser / Clear
7. Fill color, Stroke color, Paint

ctx.save();

ctx.restore();

Output:

API toBlob()

Firebase Storage

canvas-common.js

https://www.youidraw.com/apps/painter/

size option

border / fill color option

display

1. DL / UL done
2. Background img done
3. filter
4. Different type of brush in this article (1 available now)
5. Mobile Support

mouse-down on canvas to start (top-left), drag to resize, mouse-up to draw, hold shift for square

mouse-down on canvas to start (origin), drag to resize (radius), mouse-up to draw

mouse-down on canvas to start (starting point), drag to resize (length), mouse-up to draw

mouse-down on canvas to start (starting point), drag to resize (length), mouse-up to draw first line

move mouse and then click to draw more lines

hold shift when click to auto complete

mouse-down on canvas to start drawing, mouse-up to stop

1st click on canvas to set starting point, 2nd click on canvas to set on point, mouse-down and drag to locate control point, mouse-up to set control point and draw

mouse-down on canvas to start erasing, mouse-up to stop

Reset the canvas

polygon with color fill

dotted line on preview

dotted line for straight line, hollow rectangle/circle/polygon, quad.curve

ellipse

brush becomes special pencil

fonts

color/paint

click on canvas to pin points, move to resize, preview with fill color

hold shift when click to auto complete

added dotted line on preview for straight line, hollow rectangle, circle, quad.curve

added ellipse function, need improvement done

implemented plugin from https://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input

mouse-down and drag to create input field, hit enter when done

will allow options on font-size/family/color/align

moved global var section to bottom, added more var

implemented source code from https://jsfiddle.net/Fidel90/1e8e3z7e/

add color option at line 117, color obj {r:255, g:255, b:255, a:1}

bug: seems to crash sometime after sometime crash when apply color = original color

status: fixed

set as pencil, to avoid VM20 canvas-common.js:41 Uncaught TypeError: Cannot read property 'moveEventFunction' of undefined

implemented, but with bugs done

fixed .lineJoin = "round" not rendered

debugged

implemented

outline ready, color-pad ready 90%, color value get, fail to pass to global var

improved UX

now support grayscale and brightness

bug fixed

almost ready

added, will set color to strokeColor and fillColor

added new style

Fixed crush bug

action will resume after dragging out of then back into canvas(without releasing)

added feature

note: quality will lower after zooming out

update on web UI, merge files,

fixes: update global var, click event offset, added dotted line toggle

fixed stroke/fill toggle, added live color to button, fixed bugs

Save the resulting images to Firebase Storage

add btns for sp pencil's choice done

quad curve done

will allow options on font-size/family/color/align done

transform ok

offset solved

still one bug