如何检索渲染画布元素的坐标（x，y，w，h）？

Question

如何获取渲染画布元素的坐标？我需要他们将clearRect、fillRect 等应用到它的区域。

我得到了画布：

//html
<div><canvas id="canvas_id">some useless text..</canvas></div>

//javascript   
var ctx = document.getElementById('canvas_id').getContext('2d');

然后呢？有办法获得左上角x、左上角y、width 和height 这个吗？

在moonshadow的回答之后@update：

感谢答案，我知道操作是相对于画布的，但我问了这个问题，因为我没有解释自己的这种行为：我已经用画布对象 (http://avastreg.ilbello.com/canvas/test.html) 完成了一个测试文件。

这里我放了一个表格，clearRect 的尺寸可以通过表格发送。当您在画布（新闻）上触发鼠标悬停时，它会应用 clearRect 与该坐标。在mouseout 上进行补充。

起始值为：

x = 0, y = 0, w = 200, h = 200 // Notice that doesn't work. 

然后尝试类似

x: -10000, y: -10000, w: 50000000, h: 50000000 // => it seems a joke but this works!

对于其他值，它会部分清除。为什么会这样？

Answer 1

画布的宽度和高度在它的offsetWidth和offsetHeight中。

我过去曾使用这样的代码来查找画布的顶部和左侧：

var canvasTop = 0;
var canvasLeft = 0;
var c = document.getElementById('canvas_id');
while( c && ( c != document.body ) )
{
  canvasTop += c.offsetTop;
  canvasLeft += c.offsetLeft;
  c = c.offsetParent;
}

一般来说，quirksmode.org 有一个很大的列表，其中列出了这些属性的名称以及哪些浏览器支持哪些属性。

请记住，对图形上下文的操作（如 fillRect、clearRect 等）的坐标是相对于画布的，而不是整个文档，默认情况下，您不需要添加画布的顶部和左侧到您要绘制的坐标。