Excuse my first attempt with an image on Stack'. I am using Firefox to display some graphics in a small view area (HTML canvas). I want to view a 300x216 image at 2x scaling in a 600x432 canvas. I noticed the problem and verified a similar thing going on at 1x scaling on a 300x216 canvas (shown smaller).
- drew a red box filling the canvas (verified that shifting coords by 1 in any direction left a gap so the area was filled correctly with no unseen overflow)
- drew a blue bar 12px high at y=12. should have created two bands of equal height 12; they are equal but not 12px high. In fact, they are 10.
- to verify, drew a line across at 12. it shows the discrepancy but introduces another; while the line is 'sort of' at 12, it doesn't line up at the even boundary. lineWidth was 1. Transforms were cleared.
I am showing in the pic the upper right hand corner screenshot after the code in white executed. Notes in white / green added. The green bars were added manually and are 1x1 pixel (on the bigger image scaled to 2x2) checker for comparison. Notice the disproportion of the yellow line width and thin blue gap in the small image. So whatever is wrong, is wrong in a different way at the two scales. Also, canvas width and height were set in-line not through CSS. Not sure why the yellow line looks grey at 1x1 - almost like it's trying to draw at 11.5 and anti-aliased or something.
Going to halt using CANVAS until I get this sorted. This is a game killer for the entire approach. With this basic problem, I'm wondering how people can use canvas at all. Something must be wrong here.
