<body>
    <section class="paint">
      <canvas class="plz"></canvas>
      <nav class="colours">
        <a href="#" style="background-color: #A52A2A"></a>
        <a href="#" style="background-color: #ffe0bd"></a>
        <a href="#" style="background-color: #000000"></a>
        <a href="#" style="background-color: #ffffff"></a>
        <a href="#" style="background-color: #FF0000"></a>
        <a href="#" style="background-color: #0000FF"></a>
        <a href="#" style="background-color: #FFFF00"></a>
        <a href="#" style="background-color: #008000"></a>
      </nav>
    </section>
  </body>
body {
  background-color: #001b44;
  min-height: 100vh;
}

/* canvas {
  width: 1920px;
  width: 1080px;
} */

.colours {
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

nav a {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  margin: 0 10px 0 0;
}

@media only screen and (max-width: 480px) {
  nav a {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin: 0 8px 0 0;
    z-index: 1;
  }
}

const canvas = document.querySelector("canvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const ctx = canvas.getContext("2d");

ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 6;
ctx.lineCap = "round";

let shouldPaint = false;

document
  .querySelector("section.paint")
  .addEventListener("mousedown", function (event) {
    shouldPaint = true;
    ctx.moveTo(event.pageX, event.pageY);
    ctx.beginPath();
  });

document
  .querySelector("section.paint")
  .addEventListener("mouseup", function () {
    shouldPaint = false;
  });

document
  .querySelector("section.paint")
  .addEventListener("mousemove", function (event) {
    if (shouldPaint) {
      ctx.lineTo(event.pageX, event.pageY);
      ctx.stroke();
    }
  });

document
  .querySelector("section.paint")
  .addEventListener("touchstart", function (event) {
    shouldPaint = true;
    ctx.moveTo(event.touches[0].pageX, event.touches[0].pageY);
    ctx.beginPath();
  });

document
  .querySelector("section.paint")
  .addEventListener("touchend", function () {
    shouldPaint = false;
  });

document
  .querySelector("section.paint")
  .addEventListener("touchmove", function (event) {
    if (shouldPaint) {
      ctx.lineTo(event.touches[0].pageX, event.touches[0].pageY);
      ctx.stroke();
    }
  });

document
  .querySelector("section.paint")
  .querySelectorAll("nav a")
  .forEach((link) => {
    link.addEventListener("click", function (event) {
      ctx.strokeStyle = this.style.backgroundColor;
      event.preventDefault();
    });
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.