如何获得HTML5canvas的宽度和高度？
我怎样才能得到在JavaScript中的canvas元素的宽度和高度？
另外，我一直在阅读的canvas的“背景”是什么？
这可能是值得看一个教程： Firefox的canvas教程
您只需访问元素的属性即可获得canvas元素的宽度和高度。 例如：
var canvas = document.getElementById('mycanvas'); var width = canvas.width; var height = canvas.height; 上下文是您从canvas中获得的对象，以便您可以绘制它。
那么之前所有的答案都不完全正确。 主要浏览器中的2个不支持这两个属性（IE是其中之一），或者以不同的方式使用它们。
更好的解决scheme（大多数浏览器支持，但我没有检查Safari）：
var canvas = document.getElementById('mycanvas'); var width = canvas.scrollWidth; var height = canvas.scrollHeight;
至less我得到正确的值scrollWidth和-Height，并且必须在resize时设置canvas.width和height。
上下文对象允许您操作canvas; 你可以绘制矩形例如和更多。
如果你想获得宽度和高度，你可以使用标准的HTML属性的width和height ：
var canvas = document.getElementById( 'yourCanvasID' ); var ctx = canvas.getContext( '2d' ); alert( canvas.width ); alert( canvas.height );
提到canvas.width的答案返回canvas的内部尺寸，即创build元素时指定的尺寸：
<canvas width="500" height="200">
如果使用CSS调整canvas大小，则可以通过.scrollWidth和.scrollHeight访问其DOM维度：
var canvasElem = document.querySelector('canvas'); document.querySelector('#dom-dims').innerHTML = 'Canvas DOM element width x height: ' + canvasElem.scrollWidth + ' x ' + canvasElem.scrollHeight var canvasContext = canvasElem.getContext('2d'); document.querySelector('#internal-dims').innerHTML = 'Canvas internal width x height: ' + canvasContext.canvas.width + ' x ' + canvasContext.canvas.height; canvasContext.fillStyle = "#00A"; canvasContext.fillText("Distorted", 0, 10);
<p id="dom-dims"></p> <p id="internal-dims"></p> <canvas style="width: 100%; height: 123px; border: 1px dashed black">
现在从2015年开始，所有（主要？）浏览器似乎都使用c.width和c.height来获得canvas的内部大小，但是：
作为答案的问题是错误的，因为一个canvas原则上有2个不同的/独立的尺寸。
“html”可以说CSS宽度/高度和它自己的（属性）宽度/高度
看看这个简单的不同尺寸的例子 ，我把一个200/200的canvas放到一个300/100的html元素中
对于大多数示例（所有我看到）都没有CSS大小的设置，所以它们将实现（绘制）canvas大小的宽度和高度。 但是，这不是必须的，如果你采取了错误的大小 – 也就是说，可以产生有趣的结果。 内部定位的css widht / height。
我有一个问题，因为我的canvas是在没有ID的容器内，所以我用下面的jQuery代码
$('.cropArea canvas').width()
