HTML5 Canvas искажен?

Question

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

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

Answer 1

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

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

Answer 2

Canvas работает как тег изображения

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

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

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

CSS

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

canvas { 
  width:100% 
}

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

Значения по умолчанию

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

Answer 3

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

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

Не важно, используете ли вы тег html, css или установите его с помощью javascript/jquery и т. Д.