Diseñando con el mouse REMIX | Lógica de programación: Practicando con juegos y animaciones

Si esto sabemos hoy, que será mañana! Mi hija pequeña lo ama jaja
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" /
    <meta name="author" content="Roberto Gutiérrez" />
    <meta
      name="description"
      content="Ejercicio curso Alura LATAM Oracle ONE"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Chango&display=swap"
      rel="stylesheet"
    />
    <title>Click-o-Paint</title>
  </head>

  <body>
    <style>
      body {
        margin: 20px;
        background-color: #9bceb5;
        overflow: hidden;
      }

      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
        align-content: center;
        height: 100vh;
      }

      #canvas-1 {
        position: relative;
        width: 600px;
        height: 400px;
        /* border: 4px solid black; */
        border-radius: 5px;
      }

      .item {
        text-align: center;
      }

      h1 {
        font-size: 2.5vw;
        font-weight: 900;
        margin: 10px;
        color: black;
      }

      h4 {
        font-family: sans-serif;
      }

      p {
        font-family: 'Chango', cursive;
        font-size: 2vw;
        margin: 20px;
        color: black;
        font-weight: 700;
      }
    </style>

    <div class="container">
      <div class="item">
        <h1></h1>
        <p>Click-o-Paint</p>
        <h4>pinta y descarga tu creación con click secundario.</h4>
      </div>
      <canvas id="canvas-1" width="600" height="400"> </canvas>
    </div>

    <script>
      // VARIABLES ------------------>
      var screen = document.querySelector("canvas");
      var brush = screen.getContext("2d");
      var colorSampleSize = 50;
      var draw = false;

      // canvas background ----------------->
      brush.fillStyle = "whitesmoke";
      brush.fillRect(0, 0, 600, 400);

      // colors to pick ------------------>
      brush.fillStyle = "PeachPuff";
      brush.fillRect(0, 0, 50, 50);

      brush.fillStyle = "tomato";
      brush.fillRect(0, 50, 50, 50);

      brush.fillStyle = "indigo";
      brush.fillRect(0, 100, 50, 50);

      brush.fillStyle = "lightseagreen";
      brush.fillRect(0, 150, 50, 50);

      brush.fillStyle = "OliveDrab";
      brush.fillRect(0, 200, 50, 50);

      brush.fillStyle = "Teal";
      brush.fillRect(0, 250, 50, 50);

      brush.fillStyle = "Indigo";
      brush.fillRect(0, 300, 50, 50);

      brush.fillStyle = "black";
      brush.fillRect(0, 350, 50, 50);

      // FUNCTIONS ----------------->
      function drawCircle(event) {
        if (draw) {
          var x = event.clientX - screen.offsetLeft;
          var y = event.clientY - screen.offsetTop;
          if (!((x < 50) && (x > 0) && (y < 400) && (y > 0))){
          brush.fillStyle = chosenColor;
          brush.beginPath();
          brush.arc(x, y, 3, 0, 2 * 3.14);
          brush.fill();
          }
        }
      };
      screen.onmousemove = drawCircle;

      // mouse click functions -------------------->
      function activateDraw() {
        draw = true;
      }
      function deactivateDraw() {
        draw = false;
      }

      screen.onmousedown = activateDraw;

      screen.onmouseup = deactivateDraw;

      // color selection from coords ------------------>
      function pickColor(event) {
        var x = event.pageX - screen.offsetLeft;
        var y = event.pageY - screen.offsetTop;

        if (x <= 50 && y <= 50) {
          return (chosenColor = "PeachPuff");
        } // cambiar a color 'PeachPuff'

        if (x <= 50 && y <= 100) {
          return (chosenColor = "tomato");
        } // cambiar a color 'tomato'

        if (x <= 50 && y <= 150) {
          return (chosenColor = "indigo");
        } // cambiar a color 'indigo'

        if (x <= 50 && y <= 200) {
          return (chosenColor = "lightseagreen");
        } // cambiar a color 'lightseagreen'

        if (x <= 50 && y <= 250) {
          return (chosenColor = "OliveDrab");
        } // cambiar a color 'OliveDrab'

        if (x <= 50 && y <= 300) {
          return (chosenColor = "Teal");
        } // cambiar a color 'Teal'

        if (x <= 50 && y <= 350) {
          return (chosenColor = "Indigo");
        } // cambiar a color 'Indigo'

        if (x <= 50 && y <= 400) {
          return (chosenColor = "black");
        } // cambiar a color 'black'
      }

      screen.onclick = pickColor;

      brush.fillStyle = chosenColor;
      brush.beginPath();
      brush.arc(x, y, 3, 0, 2 * 3.14);
      brush.fill();
    </script>
  </body>
</html>