 <p>I only found 2 issues, and that was that you were setting it globally and you had the shadow AFTER you created the sun. You can move it wherever you'd like, but if you wanted it applied to your "Sun", then it would be best done like this.</p> <p>The way I've found best to stop that problem is by wrapping my change code in save() and restore() functions. Like this:</p> <pre><code> }, Sun: { render: function(){ ctx.fillStyle = "rgb(255,255,51)"; ctx.save(); //store ctx so it can be later reused. ctx.shadowColor = 'yellow'; ctx.shadowBlur = 50; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.beginPath(); ctx.arc(rectX, rectY, rectW, rectH, Math.PI*2, true); //alligns the sun in center ctx.closePath(); ctx.fill(); ctx.restore(); //ctx at time of save. </code></pre> <p>Working Fiddle: <a href="https://jsfiddle.net/gregborbonus/g1d6jkh7/" rel="nofollow">https://jsfiddle.net/gregborbonus/g1d6jkh7/</a></p>