JSFiddle - React, Tailwind, and code Playground

by demee

HTML

<div id="canvas"></div>

CSS

#canvas {
    width: 400px; 
    height: 400px; 
    border: 1px solid black;
}

JavaScript

/* Class Line */ 
Raphael.fn.line = function(x, y, xx, yy) {    
    return this.path(['M', x, y, 'L', xx, yy].join(' ')); 
}

Raphael.fn.vLine = function(x, y, w){
    return this.line(x, y, x + w, y);  
}

Raphael.fn.hLine = function (x, y, h){
    return this.line(x, y, x, y + h); 
}

Raphael.fn.aLine = function (x, y, l, a){
    var xx = x + l * Math.cos(a / 180 * Math.PI); 
    var yy = y + l * Math.sin(a / 180 * Math.PI);    
    
    return this.line(x, y, xx, yy);
}
    

var paper = Raphael('canvas'); 

var x = 200; 
var y = 200; 
var w = 100; 

paper.vLine(10, 10, 100);
paper.hLine(10, 10, 100); 
paper.aLine(10, 10, 100 * Math.sqrt(2), 45);
paper.aLine(110, 10, 100 * Math.sqrt(2), 135);
paper.hLine(110, 10, 100); 
paper.vLine(10, 110, 100);