JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head>
        <title>Canvas</title>
        <script type="text/javascript" src="script.js"></script>
    </head>
    
    <body>
        <canvas id='example'>Обновите браузер</canvas>
        <div id="st"></div>
    </body>

</html>

JavaScript

var example = document.getElementById("example"),
    ctx = example.getContext('2d');

example.height = 480;
example.width = 640;

ctx.beginPath();
ctx.arc(320, 80, 20, 0, 2 * Math.PI, 0);
ctx.stroke();

ctx.beginPath();
ctx.arc(380, 160, 20, 0, 2 * Math.PI, 0);
ctx.stroke();

ctx.beginPath();
ctx.arc(300, 160, 20, 0, 2 * Math.PI, 0);
ctx.stroke();

ctx.beginPath();
ctx.arc(250, 250, 20, 0, 2 * Math.PI, 0);
ctx.stroke();