website made for pixel-painting
Canvas Features
◁ Modify the size of the grid (canvas) from 1 x 1 to 64 x 64 using a range input
◁ changing size of the grid erases everything that has been painted
canvas states:
activated: cursor is yellow
color grabber: cursor is blue
not activated : cursor is browser's default cursor
canvas activation
◁ canvas activates when clicked on
◁ canvas deactivates when clicked on in the active state
painting options
default behavior is to paint black squares
color picker: choose any color for painting
eraser: return color to the background color of the canvas
rainbow: paint squares in random rainbow color
transparent: make squares transparent
grayscale: turn color to its black and white version
darken: make color 10% darker
pastel: paint squares in random pastel color
lighten: make color 10% lighter
invert: invert color using RGB (255 - R, 255 - G, 255 - B) formula
warm: make color warmer
cold: make color cooler
canvas controls
◁ any modification can be turned on and off by clicking the corresponding button
◁ Color grabber mode turns off automatically when the color is picked.
◁ Choose the background color for the canvas using the second color picker.
◁ changing background color does not erase what was painted
◁ clear button lets you erase everything that has been painted, returning canvas to its set background color
◁ grid button lets you turn off/on grid lines on the canvas
◁ third color picker allows you to change grid color
◁ screenshot button lets you make a screenshot of the canvas
UX
there is a choice of 10 images as background of the page
preloader is styled by codepen.io to handle image loading.
Website is desktop-only
Technology used
JavaScript, HTML, CSS, json
