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.arc(380, 160, 20, 0, 2 * Math.PI, 0);		
				
			ctx.arc(300, 160, 20, 0, 2 * Math.PI, 0);
			
			ctx.arc(250, 250, 20, 0, 2 * Math.PI, 0);
            ctx.stroke();