Size of HTML5 Canvas via CSS versus element attributes

by

Think about what happens if you have a JPG that is 32×32 (it has exactly 1024 total pixels) but specify via CSS that it should appear as width:800px; height:16px. The same thing applies to HTML Canvas:

  • The width and height attributes of the canvas element itself decide how many pixels you can draw on. If you don’t specify the height and width of the canvas element, then per the specs:
    “the width attribute defaults to 300, and the height attribute defaults to 150.”

  • The width and height CSS properties control the size that the element displays on screen. If the CSS dimensions are not set, the intrinsic size of the element is used for layout.

If you specify in CSS a different size than the actual dimensions of the canvas it must be stretched and squashed by the browser as necessary for display. You can see an example of this here: http://jsfiddle.net/9bheb/5/

More Related Contents:

  1. Canvas is stretched when using CSS but normal with “width” / “height” properties
  2. Changing three.js background to transparent or other color
  3. There is a 4px gap below canvas/video/audio elements in HTML5
  4. Canvas is stretched when using CSS but normal with `width` & `height` attributes
  5. Animate text for landing page
  6. CSS – Equal Height Columns?
  7. How do you easily horizontally center a using CSS? [duplicate]
  8. CSS Floating Divs At Variable Heights [duplicate]
  9. Footer at bottom of page or content, whichever is lower
  10. Is there a way to make a child DIV’s width wider than the parent DIV using CSS?
  11. Is float for layout bad? What should be used in its place?
  12. How to add a scrollbar to an HTML5 table?
  13. Center a div in CSS [closed]
  14. Font Awesome not working, icons showing as squares
  15. How do I style the HTML5 form validation error messages with CSS?
  16. Right to Left support for Twitter Bootstrap 3
  17. override css for html5 form validation/required popup
  18. CSS values using HTML5 data attribute [duplicate]
  19. How would you make two s overlap?
  20. How to auto adjust the height according to content in it?
  21. layer on top of PDF
  22. CSS text ellipsis when using variable width divs
  23. why is my content showing outside the div?
  24. How to get these two divs side-by-side?
  25. Why use an HTML5 semantic tag instead of div? [duplicate]
  26. How to display and hide a div with CSS?
  27. How to make responsive table [closed]
  28. Why adds extra top margin?
  29. How can I align 3 divs side by side?
  30. using a div to blur an image behind it? [duplicate]

Leave a Comment