hover時に、canvasを動かしたい

解決したいことは、html上aタグのリンクをhoverした時に、canvas内のオブジェクト(パーティクルの円)の大きさを変えたいです。
hoverのjQueryの処理は、記述済みで、canvas内のオブジェクトの変形のさせ方が分かりません。

canvasの記述にあまり慣れておらず、ご教授いただけますと幸いです。

codepenにてテストしております。
https://codepen.io/ThomasMaverick/pen/vYXEoaK


  <div class="scene one">
    <div class="canvas" id="canvas"></div>
  </div>
  <div class="fixed-link">
    <a href="#" id="target">リンク</a>
  </div>

canvas内のjsコード

function _createForOfIteratorHelperLoose(o, allowArrayLike) {
  var it;
  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
      if (it)
        o = it;
      var i = 0;
      return function () {
        if (i >= o.length)
          return {done: true};
        return {
          done: false,
          value: o[i++]
        };
      };
    }
    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  }

  it = o[Symbol.iterator]();
  return it.next.bind(it);
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o)
    return;
  if (typeof o === "string")
    return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(1, -1);
  if (n === "Object" && o.constructor)
    n = o.constructor.name;
  if (n === "Map" || n === "Set")
    return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
    return _arrayLikeToArray(o, minLen);
  }

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length)
    len = arr.length;
  for (var i = 0, arr2 = new Array(len); i < len; i++) {
    arr2[i] = arr[i];
  }
  return arr2;
}

var Particle =/*#__PURE__*/
function () {

  function Particle(x, y) {
    if (x === void 0) {
      x = 0;
    }

    if (y === void 0) {
      y = 0;
    }

    this.reset();
    this.fadingSpeed = Math.random();
  }

  var _proto = Particle.prototype;

  _proto.update = function update() {
    this.position.x += Math.random() * 1 - 1;
    this.position.y -= this.velocity.y;
    this.alpha -= this.fadingSpeed;

    if (this.alpha < 0) {
      this.reset();
    }
  };

  _proto.reset = function reset() {
    this.position = {
      'x': 0,
      'y': 0
      //'y': Math.random() + 0.05
    };
    this.velocity = {
      'x': 0,
      'y': Math.random() + 0.05

    };
    this.alpha = 1;
    this.fadingSpeed = Math.random() * 0.025 + 0.005;

  };

  return Particle;
}();

var ParticleEmitter =/*#__PURE__*/
function () {

  function ParticleEmitter(x, y) {
    if (x === void 0) {
      x = 0;
    }

    if (y === void 0) {
      y = 0;
    }

    this.position = {
      'x': x,
      'y': y
    };
    this.particles = [];
    this.particlesNumber = 5;

    for (var i = 0; i < this.particlesNumber; i++) {
      var particle = new Particle();
      this.particles.push(particle);

    }

  }

  var _proto2 = ParticleEmitter.prototype;

  _proto2.update = function update() {
    for (var _iterator = _createForOfIteratorHelperLoose(this.particles), _step; !(_step = _iterator()).done;) {
      var particle = _step.value;

      particle.update();
    }
  };

  return ParticleEmitter;
}();

var Experience = function () {

  function Experience(container) {
    console.clear();
    this.canvas = document.createElement('canvas');
    container.appendChild(this.canvas);
    this.context = this.canvas.getContext('2d');
    var fps = 12;
    this.fpsInterval = 1000 / fps;
    this.then = Date.now();
    this.particleEmitters = [];
    this.radius = 225;

    for (var i = 0; i < 360; i++) {
      var particleEmitter = new ParticleEmitter(0, this.radius);
      this.particleEmitters.push(particleEmitter);
    }

    this.resize();

    this.bind();

    this.loop();

  }

  var _proto3 = Experience.prototype;

  _proto3.bind = function bind() {
    window.addEventListener('resize', this.resize.bind(this), false);
  };

  _proto3.render = function render() {

    for (var _iterator2 = _createForOfIteratorHelperLoose(this.particleEmitters), _step2; !(_step2 = _iterator2()).done;) {
      var particleEmitter = _step2.value;
      particleEmitter.update();
      this.context.save();
      this.context.translate(this.canvas.width / 2, this.canvas.height / 2);
      this.context.rotate(this.particleEmitters.indexOf(particleEmitter) * Math.PI / 180);

      var my_gradient2 = this.context.createLinearGradient(0, 0, this.canvas.width / 2, this.canvas.width / 2);
      my_gradient2.addColorStop(0, "#a4d2ca");
      my_gradient2.addColorStop(0.5, "#d7ebe8");
      my_gradient2.addColorStop(1, "#dfbfc4");
      this.context.fillStyle = my_gradient2;


      for (var _iterator3 = _createForOfIteratorHelperLoose(particleEmitter.particles), _step3; !(_step3 = _iterator3()).done;) {
        var particle = _step3.value;
        particle.update();
        this.context.globalAlpha = particle.alpha;

        this.context.beginPath();
        this.context.arc(particle.position.x, particleEmitter.position.y - particle.position.y, 1, 0, Math.PI * 2);

        this.context.fill();
        this.context.closePath();

        var my_gradient = this.context.createLinearGradient(0, 0, this.canvas.width, this.canvas.width);
        my_gradient.addColorStop(0, "#dfbfc4");
        my_gradient.addColorStop(0.5, "#d7ebe8");
        my_gradient.addColorStop(1, "#a4d2ca");
        this.context.fillStyle = my_gradient;
      }
      this.context.restore();
    }
  };

  _proto3.loop = function loop() {
    this.raf = window.requestAnimationFrame(this.loop.bind(this));
    var now = Date.now();
    var delta = now - this.then;
    var degree = 1;
    if (delta > this.fpsInterval) {

      this.context.translate(this.canvas.width / 2, this.canvas.height / 2);
      this.context.rotate(++degree * Math.PI / 180);
      this.context.translate(-this.canvas.width / 2, -this.canvas.height / 2);

      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.context.beginPath();

      var my_gradient3 = this.context.createLinearGradient(0, 0, this.canvas.width / 2, this.canvas.width / 2);
      my_gradient3.addColorStop(0, "#a4d2ca");
      my_gradient3.addColorStop(0.5, "#d7ebe8");
      my_gradient3.addColorStop(1, "#dfbfc4");
      this.context.fillStyle = my_gradient3;

      this.render();
      this.then = now;

    }

  };

  _proto3.resize = function resize() {
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.screen = {
      'center': {
        'x': this.canvas.width / 0,
        'y': this.canvas.height / 0
      },
      'hypotenuse': Math.sqrt(this.canvas.width / 2 * this.canvas.width / 2 + this.canvas.height / 2 * this.canvas.height / 2)
    };
    this.reset();
  };

  _proto3.reset = function reset() {

    window.cancelAnimationFrame(this.raf);

    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

    this.loop();

  };

  return Experience;
}();

var getRandomColor = function getRandomColor() {
  var value = Math.floor(Math.random() * 255);
  return '#' + value.toString(16) + value.toString(16) + value.toString(16);
};

var container = document.getElementById('canvas');
var experience = new Experience(container);


//hover
var target = document.getElementById('target');
var sec1 = document.getElementsByClassName("section-one")[0];
target.addEventListener('mouseover', function () {
  sec1.style.background = '#000000';
　　//ここにhoverした時の処理



}, false);
target.addEventListener('mouseleave', function () {
  sec1.style.background = '#0091EA';
　//ここにhoverが外れた時

}, false);