Project

General

Profile

Actions

Feature #8761

closed

4K or high resolution monitor canvas support

Added by Apivan Tuntakurn over 2 years ago. Updated over 2 years ago.

Status:
Closed
Priority:
Normal
Assignee:
-
Target version:
-
Start date:
07/02/2021
Due date:
% Done:

0%

Estimated time:

Description

The canvas render quality is not good in 4K display.
I made a pull request to resolve this.

https://github.com/emweb/wt/pull/179

which implemented according to https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio


Related issues 1 (1 open0 closed)

Is duplicate of Feature #7417: HiDPI canvas for WPaintedWidgetReviewRoel Standaert01/23/2020

Actions
Actions #1

Updated by Apivan Tuntakurn over 2 years ago

Added monkey patch for inspiration.

To try

  1. Open https://webtoolkit.eu/widgets/trees-tables
  2. Try zoom-in to ensure that devicePixelRatio is big.
  3. Open console. and apply the monkey patch code.
  4. Open the Graphics & Charts tab by click at the tab to avoid page reload.
  5. Observe pie chart, scatter plot, and Category Chart.



  function DpiAwareCanvas(canvas) {
      var dpr = window.devicePixelRatio || 1;
      var rect = canvas.getBoundingClientRect();
      canvas.width = rect.width * dpr;
      canvas.height = rect.height * dpr;
      var ctx = canvas.__getContext('2d');
      ctx.__resetTransform();
      ctx.scale(dpr, dpr);
      canvas.style.width = rect.width + 'px';
      canvas.style.height = rect.height + 'px';
      return ctx;
    };

HTMLCanvasElement.prototype.__getContext = HTMLCanvasElement.prototype.getContext;

 HTMLCanvasElement.prototype.getContext = function(t, ...args) {

    if(t=== '2d')
    {
        return DpiAwareCanvas(this);
    }
    else
    {
        return this.__getContext(t, ...args);
    }

  }


  CanvasRenderingContext2D.prototype.__setTransform = CanvasRenderingContext2D.prototype.setTransform;


  CanvasRenderingContext2D.prototype.setTransform = function(...args) {

     console.dir(this);

     if(this.wtTransform)
     {

        console.log(this.wtTransform);
        this.wtTransform[4] =this.wtTransform[4] *(devicePixelRatio||1); 
        this.wtTransform[5] =this.wtTransform[5] *(devicePixelRatio||1); 

        this.__setTransform.apply(this, this.wtTransform);
        this.wtTransform = undefined;
        this.scale(devicePixelRatio || 1, devicePixelRatio || 1);
        return;

     }

     this.__setTransform(...args);
     this.scale(devicePixelRatio || 1, devicePixelRatio || 1);

  }



  CanvasRenderingContext2D.prototype.__resetTransform = CanvasRenderingContext2D.prototype.resetTransform;



  CanvasRenderingContext2D.prototype.resetTransform = function(...args) {


     this.resetTransform(...args);
     this.scale(devicePixelRatio || 1, devicePixelRatio || 1);

  }



Actions #2

Updated by Roel Standaert over 2 years ago

  • Is duplicate of Feature #7417: HiDPI canvas for WPaintedWidget added
Actions #3

Updated by Roel Standaert over 2 years ago

  • Status changed from New to Closed

I'm closing this in favor of the previously existing issue #7417.

Actions

Also available in: Atom PDF