JavaScript. Подробное руководство, 6-е издание, стр. 359

<b>// но не выталкивает их со стека.</b>

<b>CanvasRenderingContext2D.prototype.revert = function() {</b>

<b>  this.restore(); // Восстановить прежние значения графических свойств.</b>

<b>  this.save(); // Сохранить их снова, чтобы можно было вернуться к ним.</b>

<b>  return this; // Позволить составление цепочек вызовов методов.</b>

<b>};</b>

<b>// Устанавливает графические атрибуты в соответствии со значениями свойств объекта о.</b>

<b>// Или, при вызове без аргументов, возвращает текущие значения атрибутов в виде объекта.</b>

<b>// Обратите внимание, что этот метод не обслуживает преобразование или область отсечения. </b>

<b>CanvasRenderingContext2D.prototype.attrs = function(o) {</b>

<b>  if (о) {</b>

<b>    for(var a in о) // Для каждого свойства объекта о</b>

<b>    this[a] = о[а]; // Установить его как графический атрибут</b>

<b>    return this; // Позволить составление цепочек вызовов методов</b>

<b>  }</b>

<b>  else return {</b>

<b>    fillStyle: this.fillStyle,</b>

<b>    font: this.font,</b>

<b>    globalAlpha: this.globalAlpha,</b>

<b>    globalCompositeOperation: this.globalCompositeOperation,</b>

<b>    lineCap: this.lineCap,</b>

<b>    lineJoin: this.lineJoin,</b>

<b>    lineWidth: this.lineWidth,</b>

<b>    miterLimit: this.miterLimit,</b>

<b>    textAlign: this.textAlign,</b>

<b>    textBaseline: this.textBaseline,</b>

<b>    shadowBlur: this.shadowBlur,</b>

<b>    shadowColor: this.shadowColor,</b>

<b>    shadowOffsetX: this.shadowOffsetX,</b>

<b>    shadowOffsetY: this.shadowOffsetY, strokeStyle: this.strokeStyle</b>

<b>  };</b>

<b>};</b>

21.4.3. Размеры и система координат холста

Атрибуты

<b>width</b>
и
<b>height</b>
элемента
<b>&lt;canvas&gt;</b>
и соответствующие им свойства
<b>width</b>
и
<b>height</b>
объекта
<b>Canvas</b>
определяют размеры холста. По умолчанию начало системы координат холста (0,0) находится в его левом верхнем углу. Координата X увеличивается в направлении слева направо, а координата Y - сверху вниз. Координаты точек на холсте могут определяться вещественными значениями, и они не будут автоматически округляться до целых - для имитации частично заполненных пикселов объект
<b>Canvas</b>
использует приемы сглаживания.

Размеры холста являются настолько фундаментальными характеристиками, что они не могут изменяться без полного сброса холста в исходное состояние. Изменение значения свойства

<b>width</b>
или
<b>height</b>
объекта
<b>Canvas</b>
(даже присваивание им текущих значений) вызывает очистку холста, стирание текущего контура и переустановку всех графических атрибутов (включая текущее преобразование и область отсечения) в исходное состояние.

Несмотря на фундаментальность размеров холста, они необязательно совпадают с размерами холста на экране или с количеством пикселов, образующих поверхность для рисования. Размеры холста (а также система координат по умолчанию) измеряются в CSS-пикселах. CSS-пикселы обычно совпадают с обычными пикселами. Однако на устройствах высокого разрешения реализациям разрешено отображать несколько аппаратных пикселов в один CSS-пиксел. Это означает, что размеры прямоугольной области в пикселах, отведенной для холста, могут оказаться больше номинальных размеров холста. Об этом следует помнить при работе с механизмами холста, манипулирующими пикселами (раздел 21.4.14), но в других случаях различия между виртуальными CSS-пикселами и фактическим аппаратными пикселами не оказывают влияния на программный код, выполняющий операции с холстом.

По умолчанию элемент

<b>&lt;canvas&gt;</b>
отображается на экране с размерами (в CSS-пикселах), указанными в его HTML-атрибутах
<b>width</b>
и
<b>height</b>
. Однако, подобно любым другим HTML-элементам, элемент <canvas> может иметь экранные размеры, определяемые CSS-атрибутами стиля
<b>width</b>
и
<b>height</b>
. Если экранные размеры холста отличаются от его фактических размеров, пикселы холста автоматически будут масштабироваться в соответствии с экранными размерами, указанными в CSS-атрибутах. Экранные размеры холста никак не влияют на количество CSS- или аппаратных пикселов, зарезервированных в растровом отображении холста, а масштабирование выполняется как обычная операция масштабирования изображений. Если экранные размеры оказываются существенно больше фактических размеров холста, это приводит к появлению мозаичного эффекта. Однако это проблема скорее для художников и никак не влияет на программирование холста.

21.4.4. Преобразование системы координат

Как отмечалось выше, начало системы координат холста по умолчанию находится в левом верхнем углу, значение координаты X увеличивается в направлении слева направо, а координаты Y - сверху вниз. В этой системе координат по умолчанию координаты точки отображаются непосредственно в CSS-пикселы (которые затем отображаются в один или более аппаратных пикселов). Некоторые операции с холстом и атрибутами (такие как извлечение параметров пикселов и установка смещения теней) всегда используют систему координат по умолчанию. Однако помимо системы координат по умолчанию каждый холст имеет в составе графических свойств «текущую матрицу преобразований». Эта матрица определяет текущую систему координат холста. В большинстве операций с холстом, где указываются координаты точки, используется текущая система координат, а не система координат по умолчанию. Текущая матрица преобразований используется для преобразования указанных вами координат в эквивалентные им координаты в системе координат по умолчанию.