JSFiddle - React, Tailwind, and code Playground

A fiddle with some basic 2D canvas stuff and a basic Vec2 class

by Admiral Potato

HTML

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

CSS

*{
    margin: 0;
    padding: 0;
}
html, body{
    min-height: 100%;
}
canvas{
    display: block;
    margin: auto auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
}

JavaScript

var c = document.getElementById('cancan').getContext('2d');
c.strokeStyle= '#fff';

var Vec = function(x,y){
    this.x = x;
    this.y = y;
};

Vec.prototype = {
    add: function(v){
        this.x += v.x;
        this.x += v.y;
        return this;
    },
    sub: function(v){
        this.x -= v.x;
        this.x -= v.y;
        return this;
    },
    getAngle: function(){
        return Math.atan2(this.y, this.x);
    },
    getLength: function(){
        return Math.sqrt((this.y * this.y) + (this.x, this.x));
    }
};

var drawLine = function(a, b){
    c.beginPath();
    c.moveTo(a.x, a.y);
    c.lineTo(b.x, b.y);
    c.stroke();
};

var drawPoint = function(v){
    var r = 4;
    drawLine(
        {
            x:v.x - r,
            y:v.y - r
        },
        {
            x:v.x + r,
            y:v.y + r
        }
    );
    drawLine(
        {
            x:v.x + r,
            y:v.y - r
        },
        {
            x:v.x - r,
            y:v.y + r
        }
    );
};



var va = new Vec(10, 20);
var vb = new Vec(190, 20);
var vc = new Vec(29, 157);
var vd = new Vec(142, 90);


drawPoint(va);
drawPoint(vb);
drawPoint(vc);
drawPoint(vd);