JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div>
    <div id="sideContainer">
    <button class="sideControls">
           
      </button>
    <button class="sideControls"></button>
    <button class="sideControls"></button>    
    </div>
      <canvas id="circleCanvas">
            </canvas>

</div>

CSS

body
{
    margin:0;
    padding:0;
   
}
#circleCanvas
{
    width:100%;
    height:100%;
    
}
.sideControls
{
    width:50px;
    height:50px;
    box-shadow:0px 0px 2px rgb(210,210,210);
    border-radius:5px;
    margin-top:10px;
    outline:none;
}

#sideContainer
{
    width:70px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    background-color:rgb(230,230,230);
    align-content:center;
    text-align:center;
    
}

JavaScript

$(document).ready(function(){
        var circleCtx = $("#circleCanvas").get(0).getContext('2d');

        circleCtx.lineWidth = 10;
        circleCtx.beginPath();
        circleCtx.translate(0.5,0.5);
        circleCtx.arc(100,100,30,0,2*Math.PI);
        circleCtx.stroke();
    
});