Blurry / low resolution online

Online experiments
,
6

Hi, I understand that this is not a priority to support but actually it’s quite easy to solve.

In the core code: https://github.com/psychopy/psychojs/blob/master/js/core/Window.js
add “resolution: window.devicePixelRatio,” after line 395.

For those that want to fix it themselves, download and use a local copy of “core-2020.1.js”. Modify _setupPixi() like this (add the line “resolution: window.devicePixelRatio,” and don’t forget a comma after the previous line):

_setupPixi() {
    this._size[0] = window.innerWidth;
    this._size[1] = window.innerHeight;
    this._renderer = PIXI.autoDetectRenderer(this._size[0], this._size[1], {
      backgroundColor: this.color.int,
      resolution: window.devicePixelRatio,
    });
    this._renderer.view.style.transform = 'translatez(0)';
    this._renderer.view.style.position = 'absolute';
    document.body.appendChild(this._renderer.view);
    document.body.style.backgroundColor = this._color.hex;
    this._rootContainer = new PIXI.Container();
    this._rootContainer.interactive = true;
    Window._resizePixiRenderer(this);
    this.psychoJS.eventManager.addMouseListeners(this._renderer);
    this._resizeCallback = (e) => {
      Window._resizePixiRenderer(this, e);
      this._fullRefresh();
    };
    window.addEventListener('resize', this._resizeCallback);
    window.addEventListener('orientationchange', this._resizeCallback);
  }

I found this solution by reading Pixi.js documentation. It looks simple and obvious now, but took me an evening to figure out. Hope it’s helpful. :slight_smile:

1 Like