JSFiddle - React, Tailwind, and code Playground

by philippkuehn

HTML

<canvas id="canvas" width="200" height="200"></canvas>

CSS

canvas {
    display: block;
    margin: 50px auto;
}

JavaScript

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

function w(val) {
    var percent = (100 / 84) * val;
    return (canvas.width / 100) * percent;  
}

function h(val) {
    var percent = (100 / 84) * val;
    return (canvas.height / 100) * percent; 
}

// 1
context.fillStyle = 'rgba(0, 0, 0, .4)';
context.beginPath();
context.lineTo(w(80), h(84));
context.lineTo(w(0), h(59));
context.lineTo(w(20), h(42));
context.closePath();
context.fill();

// 2
context.fillStyle = 'rgba(0, 0, 0, .9)';
context.beginPath();
context.lineTo(w(0), h(25));
context.lineTo(w(30), h(0));
context.lineTo(w(30), h(34));
context.lineTo(w(0), h(59));
context.closePath();
context.fill();

// 3
context.fillStyle = 'rgba(0, 0, 0, .6)';
context.beginPath();
context.lineTo(w(30), h(0));
context.lineTo(w(50), h(17));
context.lineTo(w(50), h(34));
context.lineTo(w(30), h(50));
context.closePath();
context.fill();

// 4
context.fillStyle = 'rgba(0, 0, 0, 1)';
context.beginPath();
context.lineTo(w(30), h(50));
context.lineTo(w(75), h(13));
context.lineTo(w(75), h(46));
context.lineTo(w(30), h(84));
context.closePath();
context.fill();