Canvas rendered at low-res on HiDPI displays

[choco]

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.

[rhysd]

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.

[rhysd]

@cHoco

If you can, screenshot is very helpful for me.

[choco]

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

[rhysd]

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

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

Thanks!

[sethwoodworth]

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

[rhysd]

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

[johnhamelink]

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

[rhysd]

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

[rhysd]

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.

[johnhamelink]

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

[metalelf0]

I get the same as @johnhamelink .

[rhysd]

@johnhamelink @metalelf0

Ah, sorry, build directory was not created automatically :confounded: I fixed it in b5790f22ffc42c990bb468925621710c1fafa2d4.

[johnhamelink]

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

[rhysd]

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.

[choco]

Works great here :D

[rhysd]

@cHoco :+1:

[rhysd]

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