Canvas rendered at low-res on HiDPI displays

Question

Canvas rendered at low-res on HiDPI displays

Closed this issue 9 years ago · 17 comments

Hello, on HiDPI displays, like Apple retina displays the canvas is rendered at low resolution. When creating the canvas you should take into account the the devicePixelRatio to determine height and width and then properly scale when drawing onto it.

Answer 1 · 2015-12-30T14:33:21.000Z

You're right. I forgot device pixel ratio...

Although I don't have retina display Mac, I think <neovim-editor> shows very small fonts (right?). Default font size is 12px hence it shows 6px font because device pixel ratio is 2.

I'll fix this.

Answer 2 · 2015-12-30T14:37:23.000Z

@choco

If you can, screenshot is very helpful for me.

Answer 3 · 2015-12-30T14:44:12.000Z

It isn't rendered smaller, just with a lower resolution.
Here's a screenshot with neovim in terminal:

and neovim in NyaoVim:

As you can see NyaoVim looks a lot more pixelated

EDIT: As you can see I have another issue in rendering the status line and tabline, but I'll open another issue for that

Answer 4 · 2015-12-30T14:58:56.000Z

Oh, I got it. It seems that <canvas> requires twice size as its element size.

http://www.html5rocks.com/en/tutorials/canvas/hidpi/

Thanks!

Answer 5 · 2015-12-30T20:13:36.000Z

Can confirm the above. I have an HiDPI screen on linux I would be more than happy to test bugfixes on.

Answer 6 · 2016-01-04T09:27:50.000Z

I tried a bit but there are many fix points. It may take more time to fix this...

Answer 7 · 2016-01-05T03:30:25.000Z

I reckon this is the only issue stopping me from trialling NyaoVim full time!

Answer 8 · 2016-01-05T11:30:30.000Z

I started to use MacBook Pro Early 2015 today and got the same blocker

Answer 9 · 2016-01-07T09:07:38.000Z

I fixed this issue in HEAD as below.

before

- **after**

At least in my environment (OS X 10.11.1, MacBook Pro Early 2015), it works well. Could anyone also check HEAD?

$ git clone https://github.com/rhysd/neovim-component.git
$ cd ./neovim-component
$ npm run dep
$ npm run example

After that, I'll check in NyaoVim and bump up version.

Answer 10 · 2016-01-07T15:11:37.000Z

Here's what I get when follow the above script:

Answer 11 · 2016-01-07T16:20:42.000Z

I get the same as @johnhamelink .

Answer 12 · 2016-01-07T22:39:50.000Z

@johnhamelink @metalelf0

Ah, sorry, build directory was not created automatically 😖
I fixed it in b5790f2.

Answer 13 · 2016-01-07T22:49:53.000Z

@rhysd I still needed to run npm run build before npm run example worked, but it does now work and it looks great 👍

Answer 14 · 2016-01-07T23:12:23.000Z

Au, you're right, correct commands are below.

$ git clone https://github.com/rhysd/neovim-component.git
$ cd ./neovim-component
$ npm run dep
$ npm run build
$ npm run example

Thank you for confirming.

Answer 15 · 2016-01-07T23:20:25.000Z

Works great here :D

Answer 16 · 2016-01-07T23:26:04.000Z

@choco 👍

Answer 17 · 2016-01-08T02:40:14.000Z

I'll close this because I released NyaoVim 0.0.10 including this fix.
Thank you, everyone!