class Entity { constructor(name, type = 'player') { this.name = name, this.type = type } newObject(name, ...pvals) { this[name] = {} if (pvals) { for (var i = 0; i < pvals.length; i += 2) { this[name][pvals[i]] = pvals[i + 1] } } } } const canvas = document.querySelector('canvas') const ctx = canvas.getContext('2d') canvas.height = window.innerHeight - 20 canvas.width = window.innerWidth var frame = new Entity('frame', 'game-object') var button = new Entity('button', 'player-component') const radius = 70 var speed = 3 frame.newObject('$', 'r', radius) button.newObject('$', 'r', radius / 3) function updateFrame() { ctx.fillStyle = 'black' ctx.arc((canvas.width / 2), (canvas.height / 2), frame.$.r, 0, Math.PI * 2) ctx.fill() ctx.fillStyle = 'red' ctx.arc((canvas.width / 2), (canvas.height / 2), button.$.r, 0, Math.PI * 2) ctx.fill() } updateFrame() <canvas></canvas>Por lo que sé, debería imprimir un gran círculo negro en el medio del lienzo y encima un pequeño círculo rojo. Pero solo imprime un gran círculo rojo. Simplemente no puedo entenderlo.
Al igual que @Teemu señala en el comentario "Comenzar los caminos", debe usar ctx.beginPath() entre sus arcos cuando cambia de color
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath#examples
Simplifiqué gran parte de su código para mostrar solo el problema, debe hacer lo mismo cuando está resolviendo problemas class Entity era solo una distracción y podemos reproducir sin ella.
const canvas = document.querySelector('canvas') const ctx = canvas.getContext('2d') ctx.beginPath() ctx.fillStyle = 'black' ctx.arc(50, 50, 20, 0, Math.PI * 2) ctx.fill() ctx.beginPath() ctx.fillStyle = 'red' ctx.arc(50, 50, 10, 0, Math.PI * 2) ctx.fill() <canvas></canvas>Debes agregar estas 2 líneas:
ctx.beginPath(); ctx.closePath(); function updateFrame() { ctx.beginPath(); ctx.fillStyle = 'black' ctx.arc((canvas.width / 2), (canvas.height / 2), frame.$.r, 0, Math.PI * 2) ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'red' ctx.arc((canvas.width / 2), (canvas.height / 2), button.$.r, 0, Math.PI * 2) ctx.closePath(); ctx.fill() }