Холст HTML5 искажен?

Я подумал немного забавно, что посмотрю на холст. Мне показалось довольно легко нарисовать коробку, поэтому я в значительной степени скопировал пример с сайта разработчика mozilla. Вы можете увидеть это здесь: http://jsfiddle.net/Wolfy87/DZBwp/

Как вы можете видеть, он искажен. У кого-нибудь есть идеи? Я устанавливаю одинаковые x/y и ту же ширину/высоту. Это должен быть ящик, правильно?

Ответ 1

Исправлено это, мне нужно было установить ширину и высоту с помощью тега, а не CSS. Удачное предположение.

<canvas width='400' height='300'></canvas>

Ответ 2

Холст работает как тег изображения

Холст работает как изображение, имеет ширину и высоту.

В случае изображения браузер может обрабатывать ширину и высоту, проверяя файл. В случае с холстом ширина и высота не могут быть выведены, поэтому вы должны установить их непосредственно как атрибуты.

<canvas width="400" height="400" />

CSS

Когда вы устанавливаете ширину с помощью CSS, высота будет также отрегулирована, чтобы поддерживать соотношение сторон, точно так же, как изображение. Вы можете установить ширину на 100%, и холст заполнит контейнер.

canvas { 
  width:100% 
}

Если вы установите ширину и высоту, холст будет растянут, чтобы соответствовать выделенному вами пространству, точно так же, как изображение.

По умолчанию

По умолчанию ширина и высота холста 300x150, соотношение 2/1.

Ответ 3

У меня была такая же проблема, но я смог ее решить и включить теги высоты и ширины в моем css, но я не мог использовать блок "px" или "%" по высоте или ширине.

canvas#my-id{
    width:400;
    height:300;
}

Если вы используете тег html, css или задаете его с помощью javascript/jquery и т.д., это не имеет значения.