sketch board with Javascript

sketch board with Javascript

- October 31, 2020

Features:

current status of active tool

brush color and size,background color

erase and reset

set , get and delete localStorage

save the canvas image

Code Github

Demo

HTML

active tool is the status of current tool

the brush color is based on jscolor ,which can be custom

the brush size is the slider from 1 to 50

bucket color is the background color of canvas

eraser is the background color brush

clear canvas is to empty canvas

manipulate the localStorage

download the canvas to local

if screen size is too small, the message show up

link jscolor.js and script.js

CSS

custom the brush size slider

color box styles.

responsive screen message

JAVASCRIPT

select all the DOM

Build canvas and init the variables

click the brush icon to run switchToBrush function

the icon turn black which means active and the values from html initially.

And run displayBrushSize function

Make the brush size two digital number .Add zero if single number

when change brush color,current brush value is changed

when change brush size,current size value is changed and format with displayBrushSize function

when change bucket color,bucket color value is changed and begin to createCanvas and restoreCanvas

when eraser clicked,current color set to background color and size to 50

create new canvas with bucketcolor filled

and run switchToBrush function to begin sketching

begin to draw canvas, loop drawnArray

storeDrawn is a function to push all the numbers to array

get the mouse axis with getBoundingClintRect()

When mousedown,begin to draw with mouse position origin

When mousemove,store current data to array

when mouseup,finish

When clear canvas,create new canvas and empty the array

save the canvas to local storage. transfer the object to string

load the canvas if any there,and transfer strings to objects to array

clear storage with removeItem()

Download the canvas with toDataURL()
the download file init name is .download

all the setTimeout inside the function

when onload ,creatCanvas() first