Languages
[Edit]
EN

JavaScript - get canvas size

0 points
Created by:
Lily
358

In this article, we would like to show you how to get HTML canvas element size using JavaScript.

Quick solution:

var canvas = document.querySelector('#canvas-id');

var width = canvas.width;  
var height = canvas.height;

Note: This approach doesn't include padding and border properties.

or:

var canvas = document.querySelector('#canvas-id');

var width = canvas.getBoundingClientRect().width;  
var height = canvas.getBoundingClientRect().height;

 

1. Get canvas width and height

In this example, we present how to get canvas size using width and height properties.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    #my-canvas { border: 1px solid gray; }

  </style>
</head>
<body>
  <canvas id="my-canvas" width="400" height="100"></canvas>

  <script>

    var canvas = document.querySelector('#my-canvas');
    
    var width = canvas.width;  
    var height = canvas.height;
    
    console.log('width=' + width + ', height=' + height);

  </script>
</body>
</html>

2. Get width and height dynamically

In this example, we present how to get canvas size using width and height properties with getBoundingClientRect() method which returns DOM object including its padding and border.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    #my-canvas { border: 1px solid gray; }

  </style>
</head>
<body>
  <canvas id="my-canvas" width="400" height="100"></canvas>

  <script>

    var canvas = document.querySelector('#my-canvas');
    
    var width = canvas.getBoundingClientRect().width;  
    var height = canvas.getBoundingClientRect().height;
    
    console.log('Canvas size including border:\n');
    console.log('width=' + width + ', height=' + height);

  </script>
</body>
</html>

3. Default width and height

When the canvas size is not specified, the properties will return the following values:

  • width = 300px,
  • height = 150px.
// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    #my-canvas { border: 1px solid gray; }

  </style>
</head>
<body>
  <canvas id="my-canvas"></canvas>

  <script>

    var canvas = document.querySelector('#my-canvas');
    
    var width = canvas.width;  
    var height = canvas.height;
    
    console.log('width=' + width + ', height=' + height);

  </script>
</body>
</html>

References

  1. HTMLCanvasElement.width - Web APIs | MDN
  2. HTMLCanvasElement.height - Web APIs | MDN
  3. Element.getBoundingClientRect() - Web APIs | MDN

Alternative titles

  1. JavaScript - get HTML canvas element size
  2. JavaScript - get HTML canvas element size dynamically
  3. JavaScript - get HTML canvas element height and width dynamically
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

JavaScript - HTML5 canvas tutorial

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join