Canvas width and height in HTML5

by

The canvas DOM element has .height and .width properties that correspond to the height="…" and width="…" attributes. Set them to numeric values in JavaScript code to resize your canvas. For example:

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 800;
canvas.height = 600;

Note that this clears the canvas, though you should follow with ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height); to handle those browsers that don’t fully clear the canvas. You’ll need to redraw of any content you wanted displayed after the size change.

Note further that the height and width are the logical canvas dimensions used for drawing and are different from the style.height and style.width CSS attributes. If you don’t set the CSS attributes, the intrinsic size of the canvas will be used as its display size; if you do set the CSS attributes, and they differ from the canvas dimensions, your content will be scaled in the browser. For example:

// Make a canvas that has a blurry pixelated zoom-in
// with each canvas pixel drawn showing as roughly 2x2 on screen
canvas.width  = 400;
canvas.height = 300; 
canvas.style.width="800px";
canvas.style.height="600px";

See this live example of a canvas that is zoomed in by 4x.

var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
ctx.lineWidth   = 1;
ctx.strokeStyle="#f00";
ctx.fillStyle="#eff";

ctx.fillRect(  10.5, 10.5, 20, 20 );
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.fillRect(   40, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.fillRect(   70, 10, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );

ctx.strokeStyle="#fff";
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );
body { background:#eee; margin:1em; text-align:center }
canvas { background:#fff; border:1px solid #ccc; width:400px; height:160px }
<canvas width="100" height="40"></canvas>
<p>Showing that re-drawing the same antialiased lines does not obliterate old antialiased lines.</p>

More Related Contents:

  1. Html5 canvas drawImage: how to apply antialiasing
  2. Drawing an SVG file on a HTML5 canvas
  3. How can I convert an HTML element to a canvas element?
  4. HTML5 Canvas and Anti-aliasing [duplicate]
  5. Drawing text to with @font-face does not work at the first time
  6. Base64 PNG data to HTML5 canvas
  7. How to draw a rounded rectangle using HTML Canvas?
  8. What’s the best way to set a single pixel in an HTML5 canvas?
  9. How to change the opacity (alpha, transparency) of an element in a canvas element?
  10. How do I make a transparent canvas in html5?
  11. How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
  12. Can you take a “screenshot” of the page using Canvas?
  13. canvas default size
  14. Gradient Stroke Along Curve in Canvas
  15. HTML5 Canvas background image
  16. HTML5 Canvas slows down with each stroke and clear
  17. Combining two or more Canvas elements with some sort of blending
  18. context.getImageData() operation is insecure
  19. What is the difference between SVG and HTML5 Canvas?
  20. How can I use custom fonts in an HTML5 Canvas element?
  21. Subpixel anti-aliased text on HTML5’s canvas element
  22. Browser Canvas CORS Support for Cross Domain Loaded Image Manipulation
  23. Draw SVG on HTML5 Canvas with support for font element
  24. Content Security Policy: “img-src ‘self’ data:”
  25. “Erasing” in html5 canvas
  26. How put percentage width into html canvas (no css)
  27. Clear Canvas Rect (but keep background)
  28. Poor anti-aliasing of text drawn on Canvas
  29. HTML5 Canvas – Fill circle with image
  30. HTML canvas with scrollbar

Leave a Comment