dibujar.js

const ALTURA_CANVAS = 200,
  ANCHURA_CANVAS = 400;

const $btnEnviar = document.querySelector("#btnEnviar");
const $canvas = document.querySelector("#canvas");
// Simple función que dibuja algo en el canvas, solo de ejemplo
// Tomado de: https://parzibyte.me/blog/2019/07/16/dibujar-figuras-geometricas-canvas-javascript/
const dibujarEnCanvas = () => {
  // Obtener el elemento del DOM
  $canvas.width = ANCHURA_CANVAS;
  $canvas.height = ALTURA_CANVAS;
  // Del canvas, obtener el contexto para poder dibujar
  const contexto = $canvas.getContext("2d");
  // Estilo de dibujo
  // Grosor de línea
  contexto.lineWidth = 5;
  // Color de línea
  contexto.strokeStyle = "#212121";
  // Color de relleno
  contexto.fillStyle = "#D4E157";
  // Comenzamos la ruta de dibujo, o path
  contexto.beginPath();
  // Esquina superior izquierda
  contexto.moveTo(35, 5);
  // Línea recta superior
  contexto.lineTo(95, 5);
  // Esquina central derecha
  contexto.lineTo(125, 55);
  // Esquina inferior derecha
  contexto.lineTo(95, 105);
  // Línea recta inferior
  contexto.lineTo(35, 105);
  // Esquina central izquierda
  contexto.lineTo(5, 55);
  // Y dejamos que la última línea la dibuje JS
  contexto.closePath();
  // Hacemos que se dibuje
  contexto.stroke();
  // Lo rellenamos
  contexto.fill();
}