Hello. I work on the script for several hours, and to be honest, I am no longer able to rationally think.

Empty places began to appear from nowhere. Who knows what the problem is?

var game = { canvas: null, ctx: null, centerX: null, centerY: null, init: function() { this.canvas = document.getElementById("game"); this.ctx = this.canvas.getContext("2d"); this.centerX = this.canvas.width / 2; this.centerY = this.canvas.height / 2; this.circle.init(); }, circle: { params: { R: 100, user_stroke_width: 25, anim_speed: 500 }, colors: [ "red", "blue", "green", "yellow" ], clear: function() { var ctx = game.ctx; ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, game.canvas.width, game.canvas.height); ctx.restore(); }, init: function() { var ctx = game.ctx; endingAngle = 0; for (var i = 0; i < game.bets.users.length; i++) { var bets_user = game.bets.users[i]; if (i > 0 && !game.bets.users[i - 1].finished) { continue; } if (bets_user.angle.start < bets_user.angle.max) { ctx.beginPath(); startingAngle = bets_user.angle.start * Math.PI; endingAngle = (bets_user.angle.start + this.params.set) * Math.PI; if (endingAngle / Math.PI > 2) { endingAngle = 2 * Math.PI; } ctx.arc(game.centerX, game.centerY, this.params.R, startingAngle, endingAngle, false); ctx.lineWidth = this.params.user_stroke_width; ctx.strokeStyle = this.colors[i]; ctx.stroke(); bets_user.angle.start += this.params.set; } else { bets_user.finished = true; } } if (!bets_user.finished) { setTimeout(function() { game.circle.init(); }, 1); } } }, bets: { all: 0, users: [{ size: 20 }, { size: 24 }, { size: 134 }, { size: 34 }], set_all: function() { for (var i = 0; i < this.users.length; i++) { this.all += this.users[i].size; } game.circle.params.set = 2 / game.circle.params.anim_speed * 4; }, config: function() { this.set_all(); for (var i = 0; i < this.users.length; i++) { var portion = 100 / this.all * this.users[i].size; this.users[i].radians = portion / 100 * 2; var start_angle = i == 0 ? 0 : this.users[i - 1].angle.max; this.users[i].angle = { start: start_angle, max: start_angle + this.users[i].radians } } } } } window.addEventListener("load", function() { game.bets.config(); game.init(); }, false); 
 <canvas id="game" width="225" height="225"></canvas>

    1 answer 1

    Problem in lineCap . As I understand it, the default butt creates sections that are insufficient in size to overlap each other, forming gaps. Unfortunately, using the options with round and square can not get an acceptable result.