How do I get the width and height of a HTML5 canvas?

Getting down to the nitty-gritty

For the size that flexes and flits: getBoundingClientRect

To play with dimensions that morph with CSS scaling and transformations, unravel getBoundingClientRect:

const rect = canvas.getBoundingClientRect();
const dynamicWidth = rect.width; // Width taking a stroll on your CSS dimensions.
const dynamicHeight = rect.height; // Height doing some CSS-calisthenics.


But watch out: Remember these sizes vary when canvas.width and canvas.height stop to fit into their CSS outfits.

Don your artistic hat with canvas context

Every artist needs a palette. For a canvas manipulation artist like you, the context is your palette. Access your drawing arena with:

const context = canvas.getContext('2d'); // Knock-knock on context's door. Who's there? Your canvas in 2D.


Your context allows a return journey to your canvas's native dimensions:

const contextWidth = context.canvas.width; // Width in its hometown context.
const contextHeight = context.canvas.height; // Your context-routed height.


Handling dimensions with a swish and flick: destructuring

If conciseness is your jam, opt for object destructuring:

const { width, height } = canvas; // Say 'Alohomora!', unlock width and height from canvas.


Stumbling stones on your canvas journey

When defaults play spoilsport

A canvas sans attributes falls back to 300x150 pixels. Enforce explicit dimensions unless you love the unexpected.

The tale of two sizings: internal vs. CSS

Lean in and know the difference between your canvas's internal dimensions (reined by attribute sizes) and CSS-bred sizes: the former determines drawing resolution, while the latter scales your canvas in full CSS regalia.

The browser compatibility brouhaha

Get dimensions right with due diligence—devote some time to account for browser compatibility troubles. The properties scrollWidth and scrollHeight are strangers to canvas dimensions, and in the Safari kingdom, they're downright ostracized.

A canvas that sizes up with window resize

Don't let your canvas dimensions hibernate while your window resizes:

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth; // Width embracing the inner window width.
  canvas.height = window.innerHeight; // Height cuddling up with inner window height.
});


Deploy your media query tactics or viewport unit maneuvers to mould the canvas into the space it adorns.

Your canvas in crackerjack web applications

A canvas finds its true calling in interactive web apps, where you perform real-time dimension magic. Up your game in interactive visuals, digital art, or even shadow DOM scenarios.

When it's animation time or you're riding the requestAnimationFrame pony, syncing canvas size with animation loops will keep your performance high and visuals stunning.