JSFiddle - React, Tailwind, and code Playground

by Joshua_David

HTML

<canvas id = "Canvas" height = 500; width = 500/>

CSS

#Canvas
{
    height: 500px;
    width: 500px;
}

JavaScript

var PI = Math.PI;
var canvas = document.getElementById('Canvas');
var context = canvas.getContext('2d');
context.drawLine = function(x1, y1, x2, y2, color) {
    if (color === undefined) {
        color = '#000';
    }
    context.beginPath();
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.closePath();
    context.strokeStyle = color;
    context.stroke();
    return;
};
context.drawCircle = function(x, y, r, color, fill) {
    if (color === undefined) {
        color = '#000';
    }
    context.beginPath();
    context.arc(x, y, r, 0, 2 * PI);
    context.closePath();
    context.strokeStyle = color;
    context.stroke();
    if (fill) {
        context.fill();
    }
    return;
};
context.
context.drawLine(0, 0, 500, 500);
context.drawCircle(250,250,50,undefined,true);