JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="tutorial" width="1920" height="1980" style="width:100%; height:100%"></canvas>

CSS

canvas {
    background: #c0c9c9;
}

JavaScript

var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
    var ctx = canvas.getContext('2d');


    var widthCanvas = 960;
    var heightCanvas = 1910;
    var widthWhiteLine = 250;
    var startY = 0;

    //shadow
    ctx.shadowColor = '#111';
    ctx.shadowBlur = 20;


    function leftBottom() {
        //left bottom stroke 
        ctx.beginPath();
        ctx.lineWidth = widthWhiteLine;
        ctx.strokeStyle = '#f2f2f2';
        ctx.moveTo(-widthWhiteLine / 1.4, heightCanvas);
        ctx.lineTo(widthCanvas + widthWhiteLine / 1.6, widthCanvas - widthWhiteLine * 1.4);
        ctx.stroke();
        ctx.closePath;
    }

    function rightBottom() {
        //right bottom stroke 
        ctx.beginPath();
        ctx.lineWidth = widthWhiteLine;
        ctx.strokeStyle = '#f2f2f2';
        ctx.moveTo(1920 + widthWhiteLine / 1.4, heightCanvas);
        ctx.lineTo(widthCanvas - widthWhiteLine / 1.6, widthCanvas - widthWhiteLine * 1.4);
        ctx.stroke();
        ctx.closePath;
    }

    function rightTop() {
        //right top stroke                    
        ctx.beginPath();
        ctx.lineWidth = widthWhiteLine;
        ctx.shadowColor = '#111';
        ctx.shadowBlur = 20;
        ctx.strokeStyle = '#f2f2f2';
        ctx.moveTo(1920 + widthWhiteLine / 1.5, 0);
        ctx.lineTo(widthCanvas - widthWhiteLine / 1.6, widthCanvas + widthWhiteLine * 1.4);
        ctx.stroke();
    }

    function leftTop() {
        //left top stroke 
        ctx.beginPath();
        ctx.lineWidth = widthWhiteLine;
        ctx.strokeStyle = '#f2f2f2';
        ctx.moveTo(-widthWhiteLine / 1.4, startY);
        ctx.lineTo(widthCanvas + widthWhiteLine / 1.6, widthCanvas + widthWhiteLine * 1.4);
        ctx.stroke();
    }
    
    // layer draw routines by drawing bottom to top.
    leftBottom();
    rightBottom();
    rightTop();
    leftTop();

    
    //clear shadow
    ctx.shadowColor = 0;
    ctx.shadowBlur = 0;


    var widthStroke = 35;
    var...