Как получить координаты (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, ширину и высоту этого?

@update после Moonshadow «ы ответ:

ТНХ для ответа, я знаю, что операции по отношению к полотну, но я задал этот вопрос, потому что я не объяснить себе такое поведение: я сделал тестовый файл с объектом canvas (http://avastreg.ilbello.com/canvas/test.html).

Здесь я разместил форму, в которой размеры clearRect могут быть отправлены по форме. Когда вы вызываете курсор на холсте (НОВОСТИ), он применяет clearRect к этим коордам. По подсказке он заправляет.

Начальное значение являются:

x = 0, y = 0, w = 200, h = 200. Обратите внимание, что это не сработает.

Тогда попробуйте что-то вроде

x: -10000, y: -10000, w: 50000000, h: 50000000 => это кажется шуткой, но это работает!

С другими значениями он частично очищается. Почему это происходит?

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 т.д., по отношению к холсту, а не весь документ, по умолчанию, так что вы не нужно добавить вершину холста и оставил к координатам, на которые вы хотите нарисовать.