Use High DPI canvas features #456

Closed
cmdcolin opened this Issue Mar 10, 2014 · 11 comments

Comments

Projects
None yet
1 participant
@cmdcolin
Contributor

cmdcolin commented Mar 10, 2014

The CanvasFeatures track in JBrowse can look blurry (due to upscaling) on a high-resolution display. There are "High DPI" HTML5 canvas tutorials out there, and implementing this in jbrowse would be great.

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

@cmdcolin cmdcolin added the feature label Mar 10, 2014

@cmdcolin cmdcolin added the big task label Mar 24, 2014

@cmdcolin

This comment has been minimized.

Show comment
Hide comment
@cmdcolin

cmdcolin Mar 25, 2014

Contributor

I thought this was a "big task" yesterday because i thought it involved changing the css, but apparently you can just resize the canvas and keep css the same. Therefore, it was actually easier than I expected. I think there are some browser implementation differences so I will have to make sure this feature is tested out.

Screenshot (updated) (click for full size)
canvas-compare3

Contributor

cmdcolin commented Mar 25, 2014

I thought this was a "big task" yesterday because i thought it involved changing the css, but apparently you can just resize the canvas and keep css the same. Therefore, it was actually easier than I expected. I think there are some browser implementation differences so I will have to make sure this feature is tested out.

Screenshot (updated) (click for full size)
canvas-compare3

@cmdcolin cmdcolin removed the big task label Mar 25, 2014

@cmdcolin cmdcolin added this to the Release 1.11.4 milestone Mar 25, 2014

@cmdcolin

This comment has been minimized.

Show comment
Hide comment
@cmdcolin

cmdcolin Mar 25, 2014

Contributor

Closed dd16ceb

Contributor

cmdcolin commented Mar 25, 2014

Closed dd16ceb

@cmdcolin cmdcolin closed this Mar 25, 2014

@cmdcolin

This comment has been minimized.

Show comment
Hide comment
@cmdcolin

cmdcolin Mar 25, 2014

Contributor

Adding other things in high dpi mode (ie responsive images) will have to be in the future 👍

Contributor

cmdcolin commented Mar 25, 2014

Adding other things in high dpi mode (ie responsive images) will have to be in the future 👍

@cmdcolin

This comment has been minimized.

Show comment
Hide comment
@cmdcolin

cmdcolin Mar 25, 2014

Contributor

Edit: layout issues fixed. here is how it looks for the Wiggle tracks

hires2

Contributor

cmdcolin commented Mar 25, 2014

Edit: layout issues fixed. here is how it looks for the Wiggle tracks

hires2

@cmdcolin

This comment has been minimized.

Show comment
Hide comment
@cmdcolin

cmdcolin Mar 25, 2014

Contributor

19561f3 12ec929 375caf1 add High DPI for canvas-based Wiggle tracks

Contributor

cmdcolin commented Mar 25, 2014

19561f3 12ec929 375caf1 add High DPI for canvas-based Wiggle tracks

@cmdcolin

This comment has been minimized.

Show comment
Hide comment
@cmdcolin

cmdcolin Mar 26, 2014

Contributor

AFAIK This still renders properly on a low res display too. If i missed any other canvas things that need to go to High DPI mode let me know

Contributor

cmdcolin commented Mar 26, 2014

AFAIK This still renders properly on a low res display too. If i missed any other canvas things that need to go to High DPI mode let me know

cmdcolin added a commit that referenced this issue Mar 31, 2014

Wider rendering of single pixels for high dpi canvas. This does not p…
…roduce pixel perfect rendering yet, but otherwise there is whitespace inbetween the pixels on Wiggle tracks in highdpi mode. See issue #456

cmdcolin added a commit that referenced this issue Apr 8, 2014

Scale the rectangle fillRect drawing width by devicePixelRatio for Hi…
…DPI displays (height uses some tricks so it does not need changing). See issue #456

cmdcolin added a commit that referenced this issue Apr 8, 2014

Clobbered a fix to issue #461 (scaling track height) with the last co…
…mmit with issue #456 (high dpi canvas features)
@cmdcolin

This comment has been minimized.

Show comment
Hide comment
@cmdcolin

cmdcolin Apr 9, 2014

Contributor

The SNPCoverage track also needs converted to HighDPI canvas now since it uses XYPlot has been upgraded. Currently the teardrop shapes are drawn in the wrong spot on SNPCoverage track (shifted width). Also CanvasFeatures histograms were upgraded to HighDPI canvas but they draw in the wrong spot as well (shifted width)

Two screenshots
snpcoverage-bug
canvasfeatures-bug

Contributor

cmdcolin commented Apr 9, 2014

The SNPCoverage track also needs converted to HighDPI canvas now since it uses XYPlot has been upgraded. Currently the teardrop shapes are drawn in the wrong spot on SNPCoverage track (shifted width). Also CanvasFeatures histograms were upgraded to HighDPI canvas but they draw in the wrong spot as well (shifted width)

Two screenshots
snpcoverage-bug
canvasfeatures-bug

@cmdcolin

This comment has been minimized.

Show comment
Hide comment
@cmdcolin

cmdcolin Apr 9, 2014

Contributor

The SNPCoverage issue from my previous post is fixed now. Edit: not entirely 12:44pm. Edit: fixed now 1:27pm.

Contributor

cmdcolin commented Apr 9, 2014

The SNPCoverage issue from my previous post is fixed now. Edit: not entirely 12:44pm. Edit: fixed now 1:27pm.

@cmdcolin

This comment has been minimized.

Show comment
Hide comment
@cmdcolin

cmdcolin Apr 9, 2014

Contributor

The histogram issue with CanvasFeatures feature density vs HTMLFeatures histogram (mentioned above) is not related to the High DPI canvas and should be a new issue.

Contributor

cmdcolin commented Apr 9, 2014

The histogram issue with CanvasFeatures feature density vs HTMLFeatures histogram (mentioned above) is not related to the High DPI canvas and should be a new issue.

cmdcolin added a commit that referenced this issue Apr 28, 2014

cmdcolin added a commit that referenced this issue May 4, 2014

Add Math.round to fix fractional devicePixelRatio that happens primar…
…ily on Firefox and causes small gaps between pixels on the canvas in HighDPI mode. See https://www.khronos.org/webgl/public-mailing-list/archives/1311/msg00025.html and issue #456

cmdcolin added a commit that referenced this issue May 4, 2014

Use Math.ceil instead of Math.round because the small gaps between pi…
…xels sometimes become apparent on Chrome after doing the Math.round. See issue #456
@cmdcolin

This comment has been minimized.

Show comment
Hide comment
@cmdcolin

cmdcolin May 4, 2014

Contributor

Okay the previous two commits have not solved the problem. It is difficult to draw to the canvas when it has a fractional highdpi. I made a jsfiddle to explain the problem: http://jsfiddle.net/wF934/

  1. Open the script using your browser
  2. Zoom in using your browser.
  3. Rerun the script
  4. Check if you have a fractional devicePixelRatio or keep zooming to a level that does (Chrome or Firefox have fractional values, Safari does not use fractional devicePixelRatios).
  5. Notice that there are tiny gaps in between the pixels

I thought i understood the high resolution canvas but this issue is sticky. If i just render winder pixels then it can be fixed, but my impression was that i shouldn't have to do this

Contributor

cmdcolin commented May 4, 2014

Okay the previous two commits have not solved the problem. It is difficult to draw to the canvas when it has a fractional highdpi. I made a jsfiddle to explain the problem: http://jsfiddle.net/wF934/

  1. Open the script using your browser
  2. Zoom in using your browser.
  3. Rerun the script
  4. Check if you have a fractional devicePixelRatio or keep zooming to a level that does (Chrome or Firefox have fractional values, Safari does not use fractional devicePixelRatios).
  5. Notice that there are tiny gaps in between the pixels

I thought i understood the high resolution canvas but this issue is sticky. If i just render winder pixels then it can be fixed, but my impression was that i shouldn't have to do this

cmdcolin added a commit that referenced this issue May 6, 2014

Add a _fillRectMod drawing function that fixes rendering when deviceP…
…ixelRatio is a fractional number by rendering slightly wider pixels to avoid subpixel rendering in the canvas (see issue #456)

cmdcolin added a commit that referenced this issue May 7, 2014

Disable high resolution by default to avoid any issues with existing …
…installations. Users can enable it at their own risk since it's a beta feature.issue #456
@cmdcolin

This comment has been minimized.

Show comment
Hide comment
@cmdcolin

cmdcolin May 20, 2014

Contributor

There remains to be a one pixel gap that appears on Chrome only in high dpi platforms (Firefox and Safari can very rarely get this problem too, seems to be a complex subpixel round off error). This is similar to the things I brought up in issue #341, but now it does not affect safari but chrome instead, only in high dpi mode.

one-pixel-gap

This issue was one of the motivating factors for making high dpi is disabled by default...

Contributor

cmdcolin commented May 20, 2014

There remains to be a one pixel gap that appears on Chrome only in high dpi platforms (Firefox and Safari can very rarely get this problem too, seems to be a complex subpixel round off error). This is similar to the things I brought up in issue #341, but now it does not affect safari but chrome instead, only in high dpi mode.

one-pixel-gap

This issue was one of the motivating factors for making high dpi is disabled by default...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment