0

I'm drawing a scene on an html canvas. The user can resize the canvas, which causes the scene to be redrawn at a different scale. As the size gets smaller, colors in the scene fade, until eventually it's nearly white.

I suspect this is because of the canvas compositing algorithm, by which if you draw a color at a width of 0.1 pixel, the color of the affected pixel is changed only slightly. This is fine, except for the problem of it fading at smaller scales.

Are there standard techniques to avoid this? Perhaps a different drawing mode? Or increasing the number of 'paints' executed?

user1009908
  • 1,390
  • 13
  • 22
  • Do you change canvas width and height or CSS width and height? – Ruslanas Balčiūnas May 16 '15 at 01:43
  • You need to have your canvas fluid and If you are repainting/redrawing your canvas on resize event then this should be resolved... – Rayon May 16 '15 at 02:07
  • It's not due to blending/composition but to sub-pixeling. At 0.5 scale a black pixel will be still one pixel but it's color reduced to 50% as well, if your scale is 0.1 then the black now is 10% grey only and so forth. See [this](http://stackoverflow.com/questions/29371695/does-canvas-support-floating-point-numbers-when-drawing-line-or-arc/29379469#29379469) for how that works. But show some code, perhaps you can set canvas size properly and instead scale the coordinates using the same line thickness (wo code we can only guess) –  May 16 '15 at 02:41
  • @K3N This seems to be the issue. The coord space is on the order of 100k (and larger). I suspect at some scale the sub-pixel update of the color would be less than 0.5, and in an integer color space this gets rounded to zero. So even drawing 1000 items won't update the color. I suspect instead I will have to do all the scaling in js. – user1009908 May 17 '15 at 04:43
  • @user1009908 is this CAD/Geo oriented data, or for game/visualization? –  May 17 '15 at 12:24

1 Answers1

0

I've scaled the thickness of the drawn line in the past to deal with this issue. The key is to use the inverse of the scale used for the canvas. I.e if the canvas is drawn at a scale of 0.5, then the line width needs to be scaled by 1/0.5 = 2. You cant draw a line thinner than 1 pixel, so the line doesn't get thicker, it just stays the same thickness and also retains the intended colour.

enhzflep
  • 12,927
  • 2
  • 32
  • 51