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

Question

How can i get the width and height of the canvas element in JavaScript   Also  what is the  context  of the canvas I keep reading about

User · Answer

The context object allows you to manipulate the canvas; you can draw rectangles for example and a lot more.

If you want to get the width and height, you can just use the standard HTML attributes width and height:

var canvas = document.getElementById( 'yourCanvasID' );
var ctx = canvas.getContext( '2d' );

alert( canvas.width );
alert( canvas.height );

User · Answer

The answers mentioning canvas width return the internal dimensions of the canvas  i e  those specified when creating the element    lt canvas width  500  height  200  gt    If you size the canvas with CSS  its DOM dimensions are accessible via  scrollWidth and  scrollHeight    x000D   x000D  var canvasElem   document querySelector  canvas    x000D  document querySelector   dom-dims   innerHTML    Canvas DOM element width x height      x000D        canvasElem scrollWidth   x000D          x     x000D        canvasElem scrollHeight x000D   x000D  var canvasContext   canvasElem getContext  2d    x000D  document querySelector   internal-dims   innerHTML    Canvas internal width x height      x000D        canvasContext canvas width   x000D          x     x000D        canvasContext canvas height  x000D   x000D  canvasContext fillStyle     00A   x000D  canvasContext fillText  Distorted   0  10   x000D   lt p id  dom-dims  gt  lt  p gt  x000D   lt p id  internal-dims  gt  lt  p gt  x000D   lt canvas style  width  100   height  123px  border  1px dashed black  gt  x000D   x000D   x000D

User · Answer

Well  all the answers before aren t entirely correct  2 of major browsers don t support those 2 properties  IE is one of them  or use them differently   Better solution  supported by most browsers  but I didn t check Safari    var canvas   document getElementById  mycanvas    var width   canvas scrollWidth  var height   canvas scrollHeight    At least I get correct values with scrollWidth and -Height and MUST set canvas width and height when it is resized

User · Answer

Here s a CodePen that uses canvas height width  CSS height width  and context to correctly render any canvas at any size   HTML    lt button onclick  render    gt Render lt  button gt   lt canvas id  myCanvas  height  100  width  100  style  object-fit contain   gt  lt  canvas gt    CSS   canvas     width  400px    height  200px    border  1px solid red    display  block      Javascript   const myCanvas   document getElementById  myCanvas    const originalHeight   myCanvas height  const originalWidth   myCanvas width  render    function render       let dimensions   getObjectFitSize      true      myCanvas clientWidth      myCanvas clientHeight      myCanvas width      myCanvas height        myCanvas width   dimensions width    myCanvas height   dimensions height     let ctx   myCanvas getContext  2d      let ratio   Math min      myCanvas clientWidth   originalWidth      myCanvas clientHeight   originalHeight        ctx scale ratio  ratio     adjust this    ctx beginPath      ctx arc 50  50  50  0  2   Math PI     ctx stroke          adapted from  https   www npmjs com package intrinsic-scale function getObjectFitSize    contains    true   contain  false   cover       containerWidth    containerHeight    width    height       var doRatio   width   height    var cRatio   containerWidth   containerHeight    var targetWidth   0    var targetHeight   0    var test   contains   doRatio  gt  cRatio   doRatio  lt  cRatio     if  test        targetWidth   containerWidth      targetHeight   targetWidth   doRatio      else       targetHeight   containerHeight      targetWidth   targetHeight   doRatio         return       width  targetWidth      height  targetHeight      x   containerWidth - targetWidth    2      y   containerHeight - targetHeight    2          Basically  canvas height width sets the size of the bitmap you are rendering to  The CSS height width then scales the bitmap to fit the layout space  often warping it as it scales it   The context can then modify it s scale to draw  using vector operations  at different sizes

User · Answer

None of those worked for me  Try this   console log   canvasjQueryElement  0  width

User · Answer

now starting 2015 all  major   browsers seem to alow c width and c height to get the canvas internal size  but   the question as the answers are missleading  because the a canvas has in principle 2 different independent sizes   The  html  lets say CSS width height and its own  attribute-  width height  look at this short example of different sizing  where I put a 200 200 canvas into a 300 100 html-element   With most examples  all I saw  there is no css-size set  so theese get implizit the width and height of the  drawing-  canvas size  But that is not a must  and can produce funy results  if you take the wrong size - ie  css widht height for inner positioning

User · Answer

It might be worth looking at a tutorial  MDN Canvas Tutorial You can get the width and height of a canvas element simply by accessing those properties of the element  For example  var canvas   document getElementById  mycanvas    var width   canvas width  var height   canvas height   If the width and height attributes are not present in the canvas element  the default 300x150 size will be returned  To dynamically get the correct width and height use the following code  const canvasW   canvas getBoundingClientRect   width  const canvasH   canvas getBoundingClientRect   height   Or using the shorter object destructuring syntax  const   width  height     canvas getBoundingClientRect     The context is an object you get from the canvas to allow you to draw into it  You can think of the context as the API to the canvas  that provides you with the commands that enable you to draw on the canvas element

User · Answer

I had a problem because my canvas was inside of a container without ID so I used this jquery code below      cropArea canvas   width

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

Examples related to javascript

Examples related to html

Examples related to canvas