In this section we set up the canvas and color palette.
The Canvas and Palette HTML
Let’s start with adding the page header and canvas. In the <body> tag of index.html, remove the placeholder content and add this:
<h1>Basic Collaborative Drawing App</h1>
<div>
<canvas id="canvas" height="500px" width="500px"></canvas><br /></div>This produces a canvas with a white background, on a page with a white background. In other words, impossible to see. Let’s fix that by adding a border. In the <head> tag, add this styling:
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>Now you should see the outline of the canvas clearly. In a moment we’ll get the Javascript part of this going, but while we’re in the HTML, let’s add the color palette.
The color palette is two rows of 10 colors. We’ll put the structure of the palette here, then actually populate the colors in the Javascript. So below the <div> holding the canvas, add this:
<div id="palette">
<div id="row-1">
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
</div>
<div id="row-2">
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
<div class="palette"></div>
</div>
</div>Then to make the palette look right, add this CSS in the head:
.palette {
border: 1px solid black;
display: inline-block;
margin: 2px;
height: 25px;
width: 25px;
}Javascript for the Canvas and Palette
In the client folder, create a file called script.js. Here we’ll make the Canvas and Palette classes to represent what we made in the HTML.
class Canvas {
constructor() {
this.canvas = document.querySelector('#canvas');
this.ctx = this.canvas.getContext('2d');
}
}The Canvas class will be fleshed out later on, but this is to get it started. Among other things, it’ll have functions to draw that make use of the ctx property. Now let’s make the Palette class:
class Palette {
constructor() {
this.colors = [
['#000000', '#FFFFFF', '#7F7F7F', '#C3C3C3', '#880015', '#B97A57', '#ED1C24', '#FFAEC9', '#FF7F27', '#FFC90E'],
['#FFF200', '#EFE4B0', '#22B14C', '#B5E61D', '#00A2E8', '#99D9EA', '#3F48CC', '#7092BE', '#A349A4', '#C8BFE7']
];
} draw() {
const row1 = document.querySelectorAll('#row-1 .palette');
const row2 = document.querySelectorAll('#row-2 .palette');
row1.forEach((div, idx) => {
div.style.backgroundColor = this.colors[0][idx];
});
row2.forEach((div, idx) => {
div.style.backgroundColor = this.colors[1][idx];
});
}
}
The color palette is taken from Windows 7’s MSPaint palette. You can use whatever colors you prefer. The draw function loops through the palette blocks and assigns them a background color. Later on there’ll be an event handler added to “pick” the colors for drawing.
Putting It Together
Now we’ll set up Express to serve the script.js file, and initialize our objects in the HTML file. In server/index.js, add this line before the app.get('/api/test') line:
app.get('/script.js', (req, res) => {
res.sendFile(path.join(__dirname + '/../client/script.js'));
});This tells Express that whenever the front end asks for a file called “script.js,” this is the file we want.
Back in index.html, add these <script> tags under the canvas and palette:
<script type="text/javascript" src="./script.js"></script>
<script type="text/javascript">
const canvas = new Canvas();
const palette = new Palette();
palette.draw();
</script>This creates our canvas and palette objects, and calls the draw function to fill in the palette with its colors. After restarting the Node server (to pick up the change to server/index.js ), this is what it should look like in the browser:
Here’s the index.html, script.js, and index.js files at this point:
In the next section we’ll make the color palette actually set the color, and start drawing on the canvas!
