What is the difference between setting the size ( width , height ) of an object in the form width="50px" and style="width:50px;" ?

It is expressed in the fact that canvas created with dimensions in the form width="50px" heght="50px" is filled with the command

 <context_canvas'a>.fillRect ( 0 , 0 , 50 , 50 ) ;

correctly, but in the form style="width:50px;height:50px;" only partially.

Or, after all, these parameter declarations are not interchangeable?

Here is the code:

 <!DOCTYPE HTML> <html> <head> <title>Документ Без Имени</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillRect ( 0 , 0 , 200 , 30 ) ; }); </script> </head> <body> <!-- <canvas id="myCanvas" style="height: 30px; width: 200px; "> </canvas> --> <canvas id="myCanvas" height="30" width="200"> </canvas> </body> </html>

The first canvas is crooked, and the second is normal ...

  • 50px is the wrong value for the width attribute. Correct - 50 . - andreymal
  • Yes, I automatically (used to CSS) wrote "width = 50px", in the code, of course, without "px"! . But that is not the question. Why canvases with different types of installation sizes (through style and without) fillRect'se differently filled ??? - Andrey Alfimenkov

1 answer 1

HTML attribute width is not available for all tags. CSS is more flexible in this area.

In a banal example: <div width="50"></div> and <div style="width: 50px"></div> . In the first case, the div will have a standard width of 100%, in the second - 50px. HTML attributes are described in the W3C specification.