0

What is the trick with canvas scale discrepancy? I used canvas scale model for example 10 px by 10 px, draw it, but actually when I checked it (counting exactly amount of pix in the row) - its more then 10 px, its about 15px !!!

Here is the code html:

<div id="canvasDiv">
      <canvas id="canvasSignature" width="10px" height="10px" ></canvas>
   </div>

For JS:

var c = document.getElementById("canvasSignature");
var ctx = c.getContext("2d");
ctx.fillStyle = '#FD0';
ctx.fillRect(0, 0, 10, 10);

Do I need to adjust some scale (calibrating) for browser or something else ?

Full code: 

<!DOCTYPE html>
 <head>

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="canvas.css">


</head>

<body>
   <h1>Canvas 100px * 100px</h1>

   <div id="canvasDiv">

      <canvas id="canvasSignature" ></canvas>
   </div>

   <input type="button" value = "Draw"   onclick=ClearCanv();> 

   <br>

<script type="text/javascript">

    function ClearCanv(){

        var c = document.getElementById("canvasSignature");
        var ctx = c.getContext("2d");

        //context.clearRect(0, 0, canvas.width, canvas.height);
        //ctx.clearRect(0, 0, c.width, c.height);
        //ctx.fillRect(10,10,50,50);
        //ctx.beginPath();
        ctx.fillStyle = '#FD0';
        ctx.fillRect(0, 0, 10, 10);

    }

   </script>   

</body>
</html>

Here is CSS:

#canvasDiv {
    width: 10px;
    height: 10px;
}

I tried solution for Canvas is stretched when using CSS but normal with "width" / "height" properties It doesn't help!

JSFiddle: https://jsfiddle.net/neL81ce5/3/

TheRutubeify
  • 646
  • 1
  • 7
  • 24
  • If I change to 100px, its shows 150px, the ratio is 1,5!) Why ? – TheRutubeify Aug 06 '17 at 21:09
  • It could be CSS. Do you set height, width or any other element dimension properties for `#canvasDiv`, `#canvasSignature`, just `canvas` maybe? Is it contained by parent element with `display: flex`? – rishat Aug 06 '17 at 21:12
  • No, I used only all scripts in html, without CSS! – TheRutubeify Aug 06 '17 at 21:13
  • 1
    provide a reproducable fiddle. – malifa Aug 06 '17 at 21:17
  • I tried with CSS, no effect ! Anybody knows what is the problem ?! – TheRutubeify Aug 06 '17 at 21:29
  • Generally, there's no need in "calibrating". If you provide attributes "width" and "height", the canvas will take exactly the area specified, unless it's being overridden by CSS somewhere else. So, sorry, but no idea what's happening there. If you provided a Codepen or JSFiddle, that would increase the chance of reaching the solution collectively. – rishat Aug 06 '17 at 22:05
  • I added the full code, please try it ! – TheRutubeify Aug 06 '17 at 22:28
  • Guys! Don't need to guess, try these code (then count pix) and you will see the discrepancy !!! https://jsfiddle.net/neL81ce5/3/ – TheRutubeify Aug 07 '17 at 01:48
  • How do you count these pixels ? – Kaiido Aug 07 '17 at 01:54
  • Prt sc and paint! – TheRutubeify Aug 07 '17 at 01:56
  • 1
    ... Then either you've got some zoom set up on your page (via display => page zoom) either print screen is unreliable, either Paint is unreliable. run [this fiddle](https://jsfiddle.net/neL81ce5/4/) and check that you've got `dpr 1` and `10 10` as output in your javascript console. – Kaiido Aug 07 '17 at 02:05
  • OMG 67% for 1 dpr! Thank you for deep explaining !!! I broke my head already ! !) Yes the ratio was 1.5, I wrote above about it! – TheRutubeify Aug 07 '17 at 02:35

0 Answers0