JSFiddle - React, Tailwind, and code Playground

by arcturus

HTML

<canvas></canvas>

JavaScript

/* Adapted from http://people.opera.com/danield/html5/html5logo/ */

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 512;

// Dark part of the background
ctx.fillStyle = "#E44D26";
ctx.beginPath();
ctx.moveTo(71.4, 460.8);
ctx.lineTo(30.7, 0.0);
ctx.lineTo(481.7, 0.0);
ctx.lineTo(440.6, 460.8);
ctx.lineTo(256.0, 512.0);
ctx.closePath();
ctx.fill();

// Light part of the background
ctx.fillStyle = "#F16529";
ctx.beginPath();
ctx.moveTo(256.0, 472.8);
ctx.lineTo(405.4, 431.3);
ctx.lineTo(440.6, 37.7);
ctx.lineTo(256.0, 37.7);
ctx.closePath();
ctx.fill();

// Dark part of the foreground
ctx.fillStyle = "#EBEBEB";
ctx.beginPath();
ctx.moveTo(114.3,94.2);
ctx.lineTo(160.3,94.2);
ctx.lineTo(256,325.2);
ctx.lineTo(256,414.2);
ctx.closePath();
ctx.fill();

// Light part of the foreground
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.moveTo(512-114.3,94.2);
ctx.lineTo(512-160.3,94.2);
ctx.lineTo(512-256,325.2);
ctx.lineTo(512-256,414.2);
ctx.closePath();
ctx.fill();