JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" />

CSS

#myCanvas {
  height: 500px;
  width: 500px;
}

JavaScript

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

// Draw the body of the unicorn
ctx.beginPath();
ctx.fillStyle = "pink";
ctx.arc(150, 150, 100, 0, 2 * Math.PI);
ctx.fill();

// Draw the horn
ctx.beginPath();
ctx.fillStyle = "gold";
ctx.moveTo(150, 70);
ctx.lineTo(120, 130);
ctx.lineTo(180, 130);
ctx.fill();

// Draw the eyes
ctx.beginPath();
ctx.fillStyle = "black";
ctx.arc(120, 120, 10, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.arc(180, 120, 10, 0, 2 * Math.PI);
ctx.fill();

// Draw the mane
ctx.beginPath();
ctx.strokeStyle = "purple";
ctx.lineWidth = 10;
ctx.moveTo(90, 150);
ctx.lineTo(150, 70);
ctx.lineTo(210, 150);
ctx.stroke();

// Draw the tail
ctx.beginPath();
ctx.strokeStyle = "purple";
ctx.lineWidth = 10;
ctx.moveTo(150, 250);
ctx.lineTo(150, 200);
ctx.lineTo(120, 180);
ctx.lineTo(150, 200);
ctx.lineTo(180, 180);
ctx.lineTo(150, 200);
ctx.lineTo(150, 250);
ctx.stroke();