JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<canvas id="myCanvas" width="500" height="500"></canvas>

JavaScript

/* для вопроса https://toster.ru/q/421562 */
var canvas = document.getElementById("myCanvas")
  , ctx = canvas.getContext("2d")
	, r
;
ctx.translate( 500/2, 500/2);

ctx.font = "14px Arial";
ctx.textAlign = "center";
ctx.textBaseline="middle"; 

ctx.fillStyle = "#999";
for(r=100;r<=500;r+=20) circle(r);

function circle(r) {
  var dist = 16
	  , n = Math.round( 2 * Math.PI * r / dist)
		, i
	;

	for(i=0;i<n;i++) {
		ctx.rotate( 2 * Math.PI / n)
		ctx.fillText( Math.round(100*Math.random())%2?0:1,0,-r);
	}
}