JSFiddle - React, Tailwind, and code Playground

by Roman

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;
                    
                      //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();                  
		    
                    //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();
                    
                      //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;
                    
                   //right...