This is a continuation of our simple drawing grid series. Last week, we ended up with a functional drawing grid with a few expected controls like setting pen size and pen color. While it was functional, it left a lot to be desired from a presentation standpoint. This week, we will work on giving our application a little bit of style and add more features.

We will be adding support for an eraser and the ability to choose a dynamic color for the pen. To support icons on our buttons, we will use the Font Awesome Library.

Add this tag to the head section of your HTML page

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

We will utilize the following icons for the buttons:

Trash Can (fa-trash-alt) for "Clear Canvas".
Paint Brush (fa-paint-brush) for color buttons with respective color styling.
Circle (fa-circle) for size buttons, styled with different sizes.
Eraser (fa-eraser) for the "Eraser" button.

Modify the style section on the head tag as follows

<style>
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  #grid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
  #grid {
    border: 1px solid #000;
  }
  #controls {
    display: flex;
    justify-content: center;
    padding: 10px;
    gap: 10px;
  }
  button {
    padding: 5px 10px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
</style>

‍

Now add icons to your controls and enable an eraser by updating the controls area of your HTML

   <div id="controls">
      <button onclick="initializeCanvas()">
        <i class="fas fa-trash-alt"></i> Clear Canvas
      </button>
      <button onclick="setPenColor('rgb(255,0,0)')">
        <i class="fas fa-paint-brush" style="color: red"></i> Red
      </button>
      <button onclick="setPenColor('rgb(0,255,0)')">
        <i class="fas fa-paint-brush" style="color: green"></i> Green
      </button>
      <button onclick="setPenColor('rgb(0,0,255)')">
        <i class="fas fa-paint-brush" style="color: blue"></i> Blue
      </button>
      <button onclick="setPenSize(2)">
        <i class="fas fa-circle" style="font-size: 10px"></i> Small
      </button>
      <button onclick="setPenSize(5)">
        <i class="fas fa-circle" style="font-size: 15px"></i> Medium
      </button>
      <button onclick="setPenSize(10)">
        <i class="fas fa-circle" style="font-size: 20px"></i> Large
      </button>
      <button onclick="enableEraser()">
        <i class="fas fa-eraser"></i> Eraser
      </button>
    </div>

Finally, the eraser function will simply set the background color of the canvas

function enableEraser() {
  penColor = backgroundColor // Set pen color to the canvas background color
}

‍

You can view a working example of what we've done so far here.

Having hardcoded colors for our brush isn't very exciting. Instead, we can take advantage of the new input of type "color"

First let's add a bit of styling for a new input control we'll add

input[type="color"] {
  padding: 0;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
}

‍

Next add the control and another font awesome icon

<label>
  <i class="fas fa-palette"></i> Color:
  <input
    type="color"
    id="colorPicker"
    value="#000000"
    onchange="setPenColor(this.value)"
  />
</label>

‍

Remove all other color related buttons.

‍

You now have support for dynamic pen colors. Updated version can be viewed here.

‍