By :
cocavet
Published on Tuesday, January 10, 2017,22:55:02 in JavaScript Scripts
âeâ is a simple image maker. Allows you to create your own images and save them once they are finished. In addition, you can add more colors in the palette and brushes.
Technology
âeâ Use the latest technology. Itâs created with canvas and html5 in an environment configured with npm, gulp and webpack. Babel (ES6) is used for javascript and sass to generate css. All optimized through classes and structured js.
Characteristics
Colors
It starts with 6 colors that can be expanded as needed.
Brushes
The program starts with 5 brushes that can be edited or enlarged.
Undo and reUndo
All steps are saved. Therefore, it can be undo and reundo as many times as desired.
Delete
If we do not like what we are doing, we can start again.
save
You can save the images to the desktop by pressing save button.
Options
All options are in a single file that is located in the js / const.js folder. There you can edit the canvas size, colors and brushes.
Canavas
const CANVAS = {
width : $(document).width(),
height : $(document).height(),
id : 'paint',
step : -1
}
By default, canvas width and size are the same to browser size. You can modify it and modify id canvas item.
Colors
const COLORS = {
current : '#7B8D8E',
gray : '#7B8D8E',
red : '#E45641',
blue : '#44B3C2',
brown : '#5D4C46',
yellow : '#F1A94E',
green : '#53EAC8',
}
If you need another color, add in the object with their hexadecimal value. For example:
black : '#000'
You should do npm run build if you would see the changes. Then, Black will appear in your palette.
Brushes
const BRUSH = {
current : 3,
small : 3,
medium : 5,
big : 7,
extraBig : 12,
thebig : 18
}
If you need another weight, add in the object with their value pixels value. For example:
giant : 40
You should do npm run build if you would see the changes. Then, new giant brush will appear in your palette.
Enjoy it
Share This Product