I wondered about writing a starry (animated) sky on canvas, in theory everything worked out ... but when I added it as a background, the site started working with brakes, most likely I’ve got somewhere with the drawing and animation code.

Checked on OC - windows 7 (64) in Firefox 61.0 - hangs, Chrome 67.0.3396.99 - also hangs, but not so noticeably.

I ask for help from those who understand. Tell me what to rewrite / add, where nakosyachil, or your answer. Thank.

Link to the site (LP) to which stuck this animation > The site is here < . And just in case, the link separately to the animation > Codepen <

var c = document.getElementById('star-sky'); var ctx = c.getContext('2d'); var x = c.width = window.innerWidth; var y = c.height = window.innerHeight; var nStar = Math.round((x + y) / 5); var randomSize = Math.floor((Math.random() * 2) + 1); var stars = []; function createStars() { 'use strict'; stars = []; for (var i = 0; i <= nStar; i++) { stars.push({ x: Math.random() * x, y: Math.random() * y, o: Math.random(), r: Math.random(), s: 0.02, }) if (randomSize > .1) { ctx.shadowBlur = Math.floor((Math.random() * 15)); ctx.shadowColor = "white"; } } } function drawing() { 'use strict'; requestAnimationFrame(drawing); ctx.clearRect(0, 0, innerWidth, innerHeight); for (var i = 0; i <= nStar; i++) { var e = stars[i]; if (eo > 1 || eo < 0) { es = -es; } eo += es; ctx.beginPath(); ctx.arc(ex, ey, er, 0, Math.PI * 2, false); ctx.strokeStyle = 'rgba(255, 255, 255, ' + eo + ')'; ctx.stroke(); } } window.onload = function() { createStars(); drawing(); }; 
 * { margin: 0; padding: 0; } #star-sky { background: linear-gradient(#00111e 30%, #033d5e); vertical-align: bottom; height: 100vh; width: 100%; } 
 <canvas id="star-sky"></canvas>

  • Looks like normal. What do you mean by "the site started working with brakes"? - Stepan Kasyanenko
  • @StepanKasyanenko, There are animations on the site (pictures, text) and when I added the star-sky they started loading with the brakes, scoring mentioned, it is very noticeable in firefox, in chrome it is not so thrown into the galase, perhaps this is the reason that for different browsers should be added some sort of optimization? - Morpi
  • Add this information to the question - this is important. With the version of the browser and OS. - Stepan Kasyanenko

1 answer 1

It looks like a poor optimization of working with canvas in FF.

If Chrome issues 60fps, then the Mozila is 14fps.

The speed depends directly on the number of stars. With 50 pieces it does not slow down anymore)

 var c = document.getElementById('star-sky'); var ctx = c.getContext('2d'); var x = c.width = window.innerWidth; var y = c.height = window.innerHeight; var nStar = Math.round((x + y) / 5); var randomSize = Math.floor((Math.random() * 2) + 1); var stars = []; var fps = 0; setInterval(function() { console.log(fps); fps = 0; }, 1000); function createStars() { 'use strict'; stars = []; for (var i = 0; i <= nStar; i++) { stars.push({ x: Math.random() * x, y: Math.random() * y, o: Math.random(), r: Math.random(), s: 0.02, }) if (randomSize > .1) { ctx.shadowBlur = Math.floor((Math.random() * 15)); ctx.shadowColor = "white"; } } } function drawing() { 'use strict'; ctx.clearRect(0, 0, innerWidth, innerHeight); fps++; for (var i = 0; i <= nStar; i++) { var e = stars[i]; if (eo > 1 || eo < 0) { es = -es; } eo += es; ctx.beginPath(); ctx.arc(ex, ey, er, 0, Math.PI * 2, false); ctx.strokeStyle = 'rgba(255, 255, 255, ' + eo + ')'; ctx.stroke(); } requestAnimationFrame(drawing); } window.onload = function() { createStars(); drawing(); }; 
 * { margin: 0; padding: 0; } #star-sky { background: linear-gradient(#00111e 30%, #033d5e); vertical-align: bottom; height: 100vh; width: 100%; } 
 <canvas id="star-sky"></canvas>

  • Thanks for the answer and advice on checking FPS, I didn’t even think about it, now you can see what loads FPS when working star-sky - Morpi
  • Since the speed of work directly depends on the number of stars, it’s clear that drawing a single star takes a long time. - Stepan Kasyanenko
  • But I understood, then I will try to pick the star drawing code myself, if something happens, I'll post it here. Thanks again. - Morpi