How to change

Question

I'm relatively new to JS and a stranger to elements.

So, I have a canvas which generates a swirling stars background and I would simply like to reduce the speed after a delay. I've tried a couple of ways to target the value but I can't seem to get any response.

I realise that canvas elements need to be redrawn but, as the stars are already swirling, I would imagine it's already being constantly updated. If I do in fact need to redraw, how can I work out what to target if I can't inspect a canvas?

Original JavaScript file (part of a WordPress plugin so shouldn't be edited)


    function gravityBackgroundEffect() {
            
            function Constellation (canvas, options) {
                
                var screenpointSplitt = 14000,
                    viewportWidth = $(".grcs_background_content .level-1").width(),
                    viewportHeight = $(".grcs_background_content .level-1").height(),
                    particleRecalculated = Math.round( viewportWidth * viewportHeight / 24000 * ( background_particle_effect_particle_amount / 100 ) ),
                    
                    $canvas = $(canvas),
                    context = canvas.getContext("2d"),
                    defaults = {
                        star: {color: background_particle_effect_particle_color, width: 1},
                        line: {color: background_particle_effect_line_color, width: 0.2},
                        position: {x: 0,y: 0},
                        width: viewportWidth,
                        height: viewportHeight,
                        velocity: background_particle_effect_particle_speed / 50,
                        length: particleRecalculated,
                        distance: 120,
                        radius: background_particle_effect_activation_radius,
                        stars: []
                    },
                    
                    config = $.extend(true, {}, defaults, options);
        
                function Star () {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.vx = (config.velocity - (Math.random() * 0.5));
                    this.vy = (config.velocity - (Math.random() * 0.5));
                    this.radius = Math.random() * config.star.width;
                }
...

Separate JavaScript file (first attempt)

I tried to target the 'velocity' value and update it after a 5 second delay.


jQuery(document).ready(function( $ ){

  var delayInMilliseconds = 5000;
  var velocity = 10;

    setTimeout(function() {
        $("canvas").attr("velocity", velocity);
    }, delayInMilliseconds);

});

Separate JavaScript file (second attempt)

Thinking that being a child/value(?) of 'default', I thought maybe I needed to target 'default' and update all its values instead.


jQuery(document).ready(function( $ ){

  var delayInMilliseconds = 5000;

  setTimeout(function() {
      $("canvas").attr("defaults", star: {color: background_particle_effect_particle_color, width: 1}, line: {color: background_particle_effect_line_color, width: 0.2}, position: {x: 0,y: 0}, width: viewportWidth, height: viewportHeight, velocity: background_particle_effect_particle_speed / 10, length: particleRecalculated, distance: 120, radius: background_particle_effect_activation_radius, stars: []);
  }, delayInMilliseconds);
  
}

I also considered that the original canvas may be updating itself back to the original value so quickly that I can't see my update, however, setting a 1 millisecond interval for my custom JS didn't yield any results either.

I don't get any console errors - yet nothing happens. I've also tried editing some of the other values to no avail. Any help would be greatly apricated!

How to change <canvas> animation speed using jQuery?

0 Answers