├── README.md ├── index.html └── screenshot.png /README.md: -------------------------------------------------------------------------------- 1 | # 8bit Canvas 2 | 3 | A basic implementation of a canvas to draw pixel art, written in less than 250 rows of code thanks to Vue.js and CSS Grid. 4 | 5 | The idea is quite simple: we make a grid of tiny divs that represent the pixels and then we change a certain div bg color, according to the currently selected color, once the mouse clicks (or is "active") on that div. 6 | 7 | I made it because I needed a quick way to test different color combinations for some 8bit art - that's why you see the "color classes logic" with the 'shuffle/random colors' buttons. 8 | 9 | **Live version**: [ndrbrt.github.io/8bit-canvas/](https://ndrbrt.github.io/8bit-canvas/) 10 | 11 | ![Screenshot](./screenshot.png) 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8bit Canvas 8 | 9 | 10 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 |
33 | 34 |
41 |
42 | 43 |
44 | 45 |
46 |
47 | 48 | Eraser tool 49 |
50 | 51 |
52 | 53 | class {{ index }} 54 | 55 |
58 |
59 |
60 | 61 | 62 |
63 | 64 | 65 | 66 | 67 |
68 | 69 | 215 | 216 | 217 | 218 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ndrbrt/8bit-canvas/897a92582586b02b543f25eb7983f8c078d4b235/screenshot.png --------------------------------------------------------------------------------