How to use the proton-engine.CanvasRenderer function in proton-engine

emitter.addInitialize(new Proton.Mass(1));
    emitter.addInitialize(new Proton.Radius(20, 200));
    emitter.addInitialize(new Proton.Life(2, 4));
    emitter.addInitialize(
      new Proton.Position(new Proton.RectZone(0, 0, width, height))
    );

    emitter.addBehaviour(new Proton.Alpha(0, 1, Infinity, Proton.easeOutCubic));
    emitter.addBehaviour(new Proton.Scale(1, 0, Infinity, Proton.easeOutCubic));
    emitter.addBehaviour(new Proton.Color(this.colors, "random"));

    emitter.emit();
    this.proton.addEmitter(emitter);

    const renderer = new Proton.CanvasRenderer(canvas);
    this.proton.addRenderer(renderer);
  }

createRenderer(canvas) {
    const context = canvas.getContext("2d");
    const renderer = new Proton.CanvasRenderer(canvas);
    renderer.onProtonUpdate = function() {
      context.fillStyle = "rgba(0, 0, 0, 0.02)";
      context.fillRect(0, 0, canvas.width, canvas.height);
    };

    renderer.onParticleUpdate = function(particle) {
      context.beginPath();
      context.strokeStyle = particle.color;
      context.lineWidth = 1;
      context.moveTo(particle.old.p.x, particle.old.p.y);
      context.lineTo(particle.p.x, particle.p.y);
      context.closePath();
      context.stroke();
    };

    return renderer;

createRenderer(canvas) {
    const context = canvas.getContext("2d");
    const renderer = new Proton.CanvasRenderer(canvas);

    renderer.onProtonUpdate = () => {
      this.hue += 1;
      context.fillStyle = "rgba(0, 0, 0, 0.02)";
      context.fillRect(0, 0, canvas.width, canvas.height);
    };

    renderer.onParticleCreated = particle => {
      particle.data.begin = Proton.MathUtil.randomAToB(1, 120);
      particle.data.tha = Proton.MathUtil.randomAToB(0, Math.PI * 2);
    };

    renderer.onParticleUpdate = particle => {
      const hue = particle.data.begin + this.hue;
      particle.color = this.colorTemplate.replace("hue", hue % 360);

createRenderer(canvas) {
    const context = canvas.getContext("2d");
    const renderer = new Proton.CanvasRenderer(canvas);
    renderer.onProtonUpdate = () => {
      context.fillStyle = getColor(this.props.color, 0.02) || "rgba(0, 0, 0, 0.02)";
      context.fillRect(0, 0, canvas.width, canvas.height);
    };

    renderer.onParticleUpdate = function (particle) {
      context.beginPath();
      context.strokeStyle = particle.color;
      context.lineWidth = 1;
      context.moveTo(particle.old.p.x, particle.old.p.y);
      context.lineTo(particle.p.x, particle.p.y);
      context.closePath();
      context.stroke();
    };

    return renderer;

value: function createRenderer(canvas, emitter) {
      var _this2 = this;

      var context = canvas.getContext("2d");
      var renderer = new Proton.CanvasRenderer(canvas);
      var R = 140;

      renderer.onProtonUpdateAfter = function () {
        var particles = emitter.particles;

        for (var i = 0; i < particles.length; i++) {
          for (var j = i + 1; j < particles.length; j++) {
            var pA = particles[i];
            var pB = particles[j];
            var dis = pA.p.distanceTo(pB.p);

            if (dis < R) {
              var alpha = (1 - dis / R) * 0.5;
              context.strokeStyle = getColor(_this2.props.color, alpha) || "rgba(3, 3, 3, " + alpha + ")";
              context.beginPath();
              context.moveTo(pA.p.x, pA.p.y);

createRenderer(canvas, emitter) {
    const context = canvas.getContext("2d");
    const renderer = new Proton.CanvasRenderer(canvas);
    const R = 140;

    renderer.onProtonUpdateAfter = ()=> {
      let particles = emitter.particles;

      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          let pA = particles[i];
          let pB = particles[j];
          let dis = pA.p.distanceTo(pB.p);

          if (dis < R) {
            let alpha = (1 - dis / R) * 0.5;
            context.strokeStyle = getColor(this.props.color, alpha) || `rgba(3, 3, 3, ${alpha})`;
            context.beginPath();
            context.moveTo(pA.p.x, pA.p.y);

createRenderer(canvas) {
    const jointCount = 10;
    const delayTime = 8;
    const context = canvas.getContext("2d");
    const renderer = new Proton.CanvasRenderer(canvas);

    renderer.onProtonUpdate = function () {
      context.clearRect(0, 0, canvas.width, canvas.height);
    };

    renderer.onParticleCreated = particle => {
      particle.data.points = [];
      particle.data.index = 0;
    };

    renderer.onParticleUpdate = function (particle) {
      drawTadpoleTail(particle);
      if (particle.data.index % delayTime === 0) fillPointsData(particle);
      drawTadpoleHead(particle);
      particle.data.index++;
    };

value: function createRenderer(canvas) {
            var width = canvas.width;
            var height = canvas.height;
            var context = canvas.getContext("2d");
            var renderer = new Proton.CanvasRenderer(canvas);

            var onUpdate = this.getProp("onUpdate");
            if (onUpdate) {
                renderer.onProtonUpdate = function () {
                    onUpdate(context, width, height);
                };
            }

            var onParticleCreated = this.getProp("onParticleCreated");
            if (onParticleCreated) {
                renderer.onParticleCreated = function (particle) {
                    onParticleCreated(context, particle);
                };
            }

            var onParticleUpdate = this.getProp("onParticleUpdate");