JSFiddle - React, Tailwind, and code Playground

by Jonathan Lam

HTML

<canvas id="canvas" height="400" width="400"></canvas>
<img id="img">

CSS

@import url(https://fonts.googleapis.com/css?family=Fascinate);
canvas {
  display: none;
}

JavaScript

var canvas = document.getElementById("canvas"),
		ctx = canvas.getContext("2d"),
    size = canvas.height,
    half = size/2,
    quarter = size/4,
    eighth = size/8,
    tao = 2*Math.PI,
    sqrt2 = Math.sqrt(2),
    colors = {
    	bg: "#2c3e50",
      light: "#ecf0f1",
      face: "#f6e0cd",
      darkred: "#c0392b",
      lightred: "#e74c3c"
    },
    x, y;

//ctx.fillStyle = colors.light;
//ctx.fillRect(0, 0, size, size);

ctx.fillStyle = colors.bg;
ctx.beginPath();
ctx.arc(half, half, half*0.9, 0, tao);
ctx.fill();

ctx.fillStyle = colors.darkred;
x = half*0.2, y = 3*eighth;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, (y += half));
ctx.lineTo((x += quarter/sqrt2), (y -= quarter/sqrt2));
ctx.lineTo(x, (y -= half));
ctx.fill();

ctx.beginPath();
ctx.arc(half, half, half*0.9, 0, tao);
ctx.clip();

ctx.fillStyle = colors.lightred;
ctx.beginPath();
x = 0, y = quarter;
ctx.moveTo(x, y);
ctx.lineTo((x += size), (y -= quarter));
ctx.lineTo(x, (y += quarter));
ctx.lineTo((x -= size), (y += quarter));
ctx.fill();

ctx.fillStyle = colors.face;
ctx.beginPath();
x = 3*eighth, y = half;
ctx.moveTo(x, y);
ctx.lineTo((x += half), (y -= eighth));
ctx.lineTo(x, (y += 1.5*eighth));
ctx.lineTo((x -= half), (y += eighth));
ctx.fill();

ctx.fillStyle = colors.bg;
ctx.beginPath();
ctx.arc(4*eighth, 4.5*eighth, eighth/2, 0, tao);
ctx.arc(5.875*eighth, 4*eighth, eighth/2, 0, tao);
ctx.fill();

/*ctx.save();
ctx.translate(eighth+5, 3*eighth+5);
ctx.rotate(-tao/26);
ctx.fillStyle = colors.bg;
ctx.font = (size/10) + "px Fascinate";
ctx.fillText("NINJA CODER", 0, 0);
//ctx.fillText("NINJA CODER", half-ctx.measureText("NINJA CODER").width/2, half+size/20);
ctx.restore();*/

document.getElementById("img").src = canvas.toDataURL();