JSFiddle - React, Tailwind, and code Playground

by Miroslav Nedyalkov

HTML

<div class="root">
    <canvas id="myCanvas" width="400" height="400"></canvas>
</div>

CSS

.root {
    background-color: pink;
    width: 100%;
    height: 100%;
    position: absolute;
}

.canvas-circle {
    fill: green;
    lineWidth: 5;
    stroke: #003300;
}

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green'; // I'd like to set with CSS
context.fill();
context.lineWidth = 5; // I'd like to set with CSS
context.strokeStyle = '#003300'; // I'd like to set with CSS
context.stroke();