JSFiddle - React, Tailwind, and code Playground

by sungsoonz

HTML

<canvas id="preloader"></canvas>

JavaScript

const canvas = document.getElementById('preloader');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth * 2;
canvas.height = window.innerHeight * 2;
canvas.style.width = canvas.width/2 + "px"; 
canvas.style.height = canvas.height/2 + "px"; 

const xCenter = canvas.width / 2;
const yEnd = canvas.height;

ctx.beginPath();
ctx.moveTo(xCenter, 0);
ctx.lineTo(xCenter + 100, 0);
ctx.lineTo(xCenter + 200, yEnd);
ctx.lineTo(xCenter + 100, yEnd);
ctx.closePath();
ctx.fillStyle = "#101625";
ctx.fill();