How to resize html canvas element?

by

You didn’t publish your code, and I suspect you do something wrong. it is possible to change the size by assigning width and height attributes using numbers:

canvasNode.width  = 200; // in pixels
canvasNode.height = 100; // in pixels

At least it works for me. Make sure you don’t assign strings (e.g., “2cm”, “3in”, or “2.5px”), and don’t mess with styles.

Actually this is a publicly available knowledge — you can read all about it in the HTML canvas spec — it is very small and unusually informative. This is the whole DOM interface:

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL();
  DOMString toDataURL(in DOMString type, [Variadic] in any args);

  DOMObject getContext(in DOMString contextId);
};

As you can see it defines 2 attributes width and height, and both of them are unsigned long.

More Related Contents:

  1. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  2. Resizing an image in an HTML5 canvas
  3. Maximum size of a element
  4. Get a pixel from HTML Canvas?
  5. Can I turn off antialiasing on an HTML element?
  6. Zoom Canvas to Mouse Cursor
  7. Resize image with javascript canvas (smoothly)
  8. Change :hover CSS properties with JavaScript
  9. Zoom in on a point (using scale and translate)
  10. How to draw an inline svg (in DOM) to a canvas?
  11. Convert SVG to PNG with applied images as background to svg elements
  12. Any way to clone HTML5 canvas element with its content?
  13. Best way to detect that HTML5 is not supported
  14. Capture frames from video with HTML5 and JavaScript
  15. Text wrap in a element
  16. jQuery: how to change tag name?
  17. How do I rotate a single object on an html 5 canvas?
  18. Is there a best practice for generating html with javascript
  19. How to determine the intended frame-rate on an html video element
  20. getting mouse position with javascript within canvas
  21. How to save canvas animation as gif or webm?
  22. Set content of HTML with Javascript
  23. clearRect not working
  24. canvas getContext(“2d”) returns null
  25. clearing circular regions from HTML5 Canvas
  26. draw 10,000 objects on canvas javascript
  27. Body animation isn’t smooth
  28. Creating a Clickable Grid in a Web Browser
  29. JavaScript runtime error: ‘$’ is undefined
  30. canvas- Cropping images in different shapes

Leave a Comment