HTML5 холст с абсолютной позицией не работает

Question

Холст с абсолютной позицией не работает, как вы можете видеть здесь: http://jsfiddle.net/733zs/1/ (протестировано в Firefox и Chrome) Прямоугольник должен иметь размер 500x500 пикселей.

Есть ли способзаставить это работать, не устанавливая ширину и высоту вручную?Или я допустил какие-либо ошибки?

Answer 1

Вы должны установить ширину и высоту вручную.

Это можно сделать с помощью события JavaScript onresize - это хорошо, потому что вам почти всегда нужно перерисовывать поверхность холста по размеру в любом случае.

РЕДАКТИРОВАТЬ:

Из спецификации W3, вот интерфейс DOM canvas:

http://www.w3.org/TR/html5/the-canvas-element.html

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL(in optional DOMString type, in any... args);
  void toBlob(in FileCallback, in optional DOMString type, in any... args);

  object getContext(in DOMString contextId, in any... args);
};

Элемент canvas имеет два атрибута для управления размером координатное пространство: ширина и высота. Эти атрибуты, если указаны, должны иметь значения, которые являются действительными неотрицательными целыми числами. Правила для парсинг неотрицательных целых чисел должен быть использован для получения их числовых ценности. Если атрибут отсутствует или при его анализе возвращается значение ошибка, то вместо этого должно использоваться значение по умолчанию. Ширина атрибут по умолчанию равен 300, а атрибут высоты по умолчанию равен 150.

Answer 2

Прямоугольник обрезается, потому что элемент canvas всего 300,150 пикселей.

http://jsfiddle.net/733zs/3/

Answer 3

Позиционирование работает правильно.Вы просто рисуете черный ящик в правом нижнем углу холста.