A Pixel Art Editor (Built with Vue.js)

I was perusing Instagram this morning and I came across some pixel art. I thought it looked pretty cool, and thought I’d like to draw some of my own. But I was bored, and I’m a web developer, so I thought I’d just build my own web based pixel editor.

Why Vue?

I used Vue because that is the frontend framework I use at work, and I was too lazy to remember how to set up React. This could have just as easily been built with React as well.

Setting It Up

Really this took 4 components.

  1. Vue-Color so that you can choose colors. 
    So yeah, just run: npm install vue-color
  2. a container, so that I could line up the canvas and the color picker next to each other.
  3. Art: I named it this, but it’s really just an art board for your pixel drawings.
  4. Pixel: These are the pixels you color to make your fun artwork.

The Code

The container:

/** Container.vue **/
<template>
<div class="container">
    <div style="float:left; width:800px">
<Art :colors="colors" />
</div>
    <div style="float: right; width:300px; margin-top:200px">
<chrome-picker v-model="colors" />
</div>

</div>
</template>
<script>
import Art from './Art.vue';
import { Chrome } from 'vue-color'
export default {
data(){
return {
colors: []
}
},
methods: {
changeColor(){
console.log('Change color');
this.coloring = colors.hex;
}
},
components: {
Art,
'chrome-picker': Chrome
}
}
</script>

Art.vue

/** Art.vue **/
<template>
<div>
<br>
<hr>
<div id="art">
<div v-for="n in 950">
<Pixel :coloring="color" />
</div>
</div>
<br>
<hr>
<br>
</div>
</template>
<style scoped>
#art{
width: 762px;
height: 502px;
border: 1px solid #000;
}
</style>
<script>
import Pixel from './Pixel.vue';
export default {
mounted() {
console.log('Art');
},
computed: {
color(){
return this.colors.hex;
}
},
props: [
'colors'
],
components: {
Pixel
}
}
</script>

Pixle.vue

<template>
<div class="pixel" v-bind:style="{background: activeBackground}" @click="changeColor">
</div>
</template>
<style scoped>   
div.pixel{
/*border: 1px solid #000;*/
height: 20px;
width: 20px;
float: left;
}
</style>
<script>
export default {
mounted() {
console.log('Pixel');
},
data(){
return {
activeBackground: '#ffffff'
}
},
methods: {
changeColor(){
if(this.activeBackground == this.coloring){
this.activeBackground = '#ffffff'
}else{
this.activeBackground = this.coloring;
}

}
},
props: [
'coloring'
]
}
</script>

app.js to hold it all together.

window.Vue = require('vue');
Vue.component('container', require('./components/Container.vue'));
const app = new Vue({
el: '#app'
});

Final Product

http://andyhartnett.com/coloring.html

Go draw some pixel art! (I don’t know why I named it coloring…)