How to make a similar effect on CANVAS?

Question

JavaScript

Here is an excellent example, but I did not find in the source what is responsible for this. https://yandex.ru/company/
I found an attribute in the canvas parent - apiLivequeries I
thought that there were live queries, but the script works without the Internet, and in fact, a set of fifteen phrases, for example, is needed to appear with such an effect. I will be very grateful!
I also created a directory on the server /company/_/api/livequeries/
In it I give json

$json = json_decode(file_get_contents('./text.json'), true);
echo json_encode($json, JSON_UNESCAPED_UNICODE);

But in the end, emptiness in the canvas.
In the Yandex example, in the attribute they have done this (exactly with & quot ; )

data-bem="{"livequeries":{"apiLivequeries":"/company/_/api/livequeries/"}}"

Answer 1

If you don't need canvas, you can use something like www.mattboldt.com/demos/typed-js .
In general, google in the direction of "js typing effect".

Answer 2

The code that is responsible for rendering (ran through the deobfuscator):

BEM.DOM.decl("livequeries", {
  minItems : 100,
  pixelRatio : void 0,
  /**
   * @param {number} value
   * @return {?}
   */
  _size : function(value) {
    return value * this.pixelRatio;
  },
  onSetMod : {
    /**
     * @return {undefined}
     */
    js : function() {
      var self = this;
      var c = this.$canvas = this.elem("queries");
      var canvas = this.canvas = c[0];
      var valueAccessor = this.params.rowsCount || 10;
      var mQueries = this.params.colsCount || 100;
      var s = this.params.maxQueries || 20;
      var asserterNames = this.params.blindAreas || ;
      var fn = this.mQueries = new i(mQueries, valueAccessor, s);
      this.context = canvas.getContext("2d");
      this.rgb = a(c.css("color"));
      asserterNames.forEach(function(arr) {
        fn.disable(arr[0], arr[1], arr[2], arr[3]);
      });
      $(window).resize(function() {
        self.rescale();
      });
      this.startRenderingLoop();
    }
  },
  /**
   * @return {undefined}
   */
  startRenderingLoop : function() {
    var parms = this;
    if (!this.isRenderingRunning()) {
      /** @type {number} */
      this.renderingLoopTimer = setInterval(function() {
        /** @type {number} */
        var pixelRatio = window.devicePixelRatio;
        if (parms.pixelRatio !== pixelRatio) {
          /** @type {number} */
          parms.pixelRatio = pixelRatio;
          parms.rescale();
        }
        parms.doLayout();
      }, 1E3 / 30);
    }
  },
  /**
   * @return {undefined}
   */
  stopRenderingLoop : function() {
    window.clearInterval(this.renderingLoopTimer);
    /** @type {null} */
    this.renderingLoopTimer = null;
  },
  /**
   * @return {?}
   */
  isRenderingRunning : function() {
    return Boolean(this.renderingLoopTimer);
  },
  /**
   * @return {undefined}
   */
  rescale : function() {
    var $this = this.$canvas;
    var width = $this.width();
    var height = $this.height();
    var canvas = this.canvas;
    var a = this.mQueries;
    var value = o($this.css("font-size"));
    /** @type {Array} */
    this.cellSize = [Math.floor(width / a.width), Math.floor(height / a.height)];
    this.font = $this.css("font-style") + " " + $this.css("font-weight") + " " + this._size(value[0]) + value[1] + " " + $this.css("font-family");
    canvas.width = this._size(width);
    canvas.height = this._size(height);
  },
  /**
   * @return {undefined}
   */
  doLayout : function() {
    var data;
    var actor;
    /** @type {null} */
    var file = null;
    var self = this.mQueries;
    var files = self.queries;
    var ctx = this.context;
    var setFillStyle = this.rgb;
    var cellSize = this.cellSize;
    this.clearRect(0, 0, 9999, 9999);
    for (file in files) {
      if (files.hasOwnProperty(file)) {
        data = files[file];
        actor = data.place;
        data = data.query;
        if (data.relevance) {
          if (data.state) {
            /** @type {string} */
            ctx.textAlign = "left";
            /** @type {string} */
            ctx.textBaseline = "center";
            ctx.font = this.font;
            this.setFillStyle(setFillStyle[0], setFillStyle[1], setFillStyle[2], data.relevance);
            this.fillText(data.state, actor[0] * cellSize[0], actor[1] * cellSize[1] + cellSize[1] / 2, data.text.length * cellSize[0]);
          }
        }
      }
    }
    if (self.stack.length < this.minItems) {
      if (!this._loading) {
        this.pullQueries();
      }
    }
    if (null === file) {
      this.stopRenderingLoop();
    }
  },
  /**
   * @param {?} text
   * @param {number} x
   * @param {number} y
   * @param {number} width
   * @return {undefined}
   */
  fillText : function(text, x, y, width) {
    x = this._size(x);
    y = this._size(y);
    width = this._size(width);
    this.context.fillText(text, x, y, width);
  },
  /**
   * @param {number} x
   * @param {number} y
   * @param {number} width
   * @param {number} height
   * @return {undefined}
   */
  clearRect : function(x, y, width, height) {
    x = this._size(x);
    y = this._size(y);
    width = this._size(width);
    height = this._size(height);
    this.context.clearRect(x, y, width, height);
  },
  /**
   * @param {?} color
   * @param {?} f
   * @param {?} fillStyle
   * @param {?} e
   * @return {undefined}
   */
  setFillStyle : function(color, f, fillStyle, e) {
    this.context.fillStyle = n(color, f, fillStyle, e);
  },
  /**
   * @return {undefined}
   */
  pullQueries : function() {
    var self = this;
    /** @type {boolean} */
    this._loading = true;
    $.get(this.params.apiLivequeries).then(function(pair) {
      /** @type {boolean} */
      self._loading = false;
      self.mQueries.store(pair.livequeries);
      if (!self.isRenderingRunning()) {
        self.startRenderingLoop();
      }
    }, function() {
      setTimeout(function() {
        self.pullQueries();
      }, 5E3);
    });
  }
});