Canvas

Объект Canvas представляет собой HTML элемент <canvas>:

<canvas id="Canvas" width="300" height="150">
    <p>Ваш браузер не поддерживает рисование.</p>
</canvas>

Для того чтобы подготовить элемент <canvas> к работе, в первую очередь необходимо вызвать метод getContext(). Этот метод генерирует контекст рисования, который будет связан с указанным холстом:

var canvas = document.getElementById('Canvas'); // получаем элемент
var ctx = canvas.getContext('2d'); // получаем объект canvas

addColorStop()

Метод addColorStop добавляет стоп-цвет объекту градиента, созданному методом createLinearGradient или createRadialGradient.

Синтаксис

ctx.addColorStop( position, color )

Параметры

position

положение цвета в градиенте. Значение должно быть в диапазоне 0.0 (начало) до 1.0 (конец)

color

имя или код цвета, или его rgb/rgba представление

Объекту градиента можно задать сколько угодно стоп-цветов.

Пример

init('addColorStop');
var grd=ctx.createLinearGradient(0,0,299,0);
 grd.addColorStop(0,"red");
 grd.addColorStop(0.143,"#ffff00");
 grd.addColorStop(0.286,"yellow");
 grd.addColorStop(0.428,"green");
 grd.addColorStop(0.571,"aqua");
 grd.addColorStop(0.715,"blue");
 grd.addColorStop(0.858,"#ff00ff");
 grd.addColorStop(1,"red");

 ctx.fillStyle=grd;
 ctx.fillRect(0,0,300,250); 

arc()

Метод arc рисует дугу.

Синтаксис

ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise)

Параметры

centerX, centerY

координаты центра дуги

radius

величина радиуса

startingAngle, endingAngle

начало и окончание дуги. Значения задаются в радианах

antiClockwise

направление соединения точек начал и конца дуги: по часовой стрелки или против. По умолчанию значение равно false — рисует по часовой стрелке. Значение true - против часовой

Дуга отображается после вызова метода stroke() или fill().

Пример

init('arc');
 var centerX = 150,
     centerY = 90,
     radius = 110,
     startingAngle = 1.1 * Math.PI,
     endingAngle = 1.9 * Math.PI;

 ctx.beginPath();
 ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, true);
 
 ctx.lineWidth = 24;  // Толщина дуги
 ctx.strokeStyle = "#00aaff"; // Цвет дуги
 ctx.closePath();
 ctx.stroke();

arcTo()

Метод arcTo создает дугу между двумя касательными на холсте.

Синтаксис

ctx.arcTo( x1,y1,x2,y2,radius ) ;

Параметры

x1, y1

Координаты начала дуги

x2, y2

Координата конца дуги

radius

Радиус дуги

Пример

init('arcTo');
 ctx.beginPath(); 
 ctx.moveTo(20,20);
 ctx.strokeStyle = "#ff00ff";
 ctx.lineWidth = 12;
 ctx.lineTo(100,20);
 ctx.arcTo(150,20,150,70,50);
 ctx.lineTo(150,120);
 ctx.stroke();

beginPath()

Метод beginPath объявляет, что начинается новый контур. Необходим когда нужно задать разные стили объектам на холсте.

Синтаксис

ctx.beginPath()

Пример

init('beginPath');
ctx.beginPath(); 
 ctx.lineWidth="7";
 ctx.strokeStyle="green";
 ctx.moveTo(0,75);
 ctx.lineTo(270,75);
 ctx.stroke();

ctx.beginPath();
 ctx.strokeStyle="purple";
 ctx.moveTo(50,0);
 ctx.lineTo(250,230);
 ctx.stroke();

bezierCurveTo()

Метод bezierCurveTo рисует кривую Безье от текущей точки на холсте до указанной через промежуточные (контрольные) точки.

Подробнее о кривых Безье.

Синтаксис

ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

Параметры

controlX, controlY, controlX2, controlY2...

координаты контрольных точек, может быть сколько угодно

endX, endY

координаты окончания кривой

Пример

Кривая отобразится после вызова метода stroke().

init('bezierCurveTo');
ctx.strokeStyle = "#ff7711";
ctx.lineWidth = 10;
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25); 
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.stroke();

clearRect()

Метод clearRect очищает указанную область.

Синтаксис

ctx.clearRect(x,y,width,height)

Параметры

x и y

координаты левого верхнего угла прямоугольника

width

ширина прямоугольника

height

высота прямоугольника

Все параметры обязательны, должны быть положительными числами.

Пример

init('clearRect');
ctx.fillStyle="red";
ctx.fillRect(50,50,150,50);
ctx.fillStyle="green";
ctx.fillRect(60,100,150,50);
ctx.clearRect(100,70,50,50);

clip()

Метод clip удаляется все что находится вне указанной фигуры.

Синтаксис

ctx.clip()

Примеры

Без ctx.clip():

init('Без clip');
 ctx.rect(50,20,200,120);
 ctx.stroke();

 ctx.fillStyle="red";
 ctx.fillRect(0,0,150,100);

C ctx.clip():

init('clip');
 ctx.rect(50,20,200,120);
 ctx.stroke();
 ctx.clip();

 ctx.fillStyle="red";
 ctx.fillRect(0,0,150,100);

closePath()

Метод closePath замыкает контур: последняя точка контура соединяется с первой. Текущее положение на холсте перемещается туда же. Начало контура определяется beginPath().

Синтаксис

ctx.closePath()

Пример

init('closePath');
ctx.beginPath();
 ctx.moveTo(20,20);
 ctx.lineTo(20,200);
 ctx.lineTo(270,200);
 ctx.closePath();
 ctx.stroke();
 ctx.fillStyle="red";
 ctx.fill(); 

createImageData()

Метод createImageData создает объект imageData.

Синтаксис

ctx.createImageData(width, height)

ctx.createImageData(OldImageData)

Параметры

width, height

Размеры создаваемого объекта. Результатом будет объект imageData с RGBA = (0,0,0,0) и размером width x height.

OldImageData

  Объект imageData полученный ранее с помощью getImageData или созданный с помощью createImageData

Комментарии

Чтобы установить нужные цвета в массиве используем свойство data:

imageData.data[j] = value

• j — позиция в массиве imageData;
• value — значение для данного канала RGBA (число от 0 до 255).

На каждый пиксель отводится 4 элемента:

• imageData.data[i+0] — значение красного цвета (число от 0 до 255);
• imageData.data[i+1] — значение зеленого цвета (число от 0 до 255);
• imageData.data[i+2] — значение синего цвета (число от 0 до 255);
• imageData.data[i+3] — значение прозрачности (число от 0 до 255);

i — номер пикселя

Пример

init('createImageData');
var pixelSet = ctx.createImageData(150,150); // Черный квадрат 200 x 200 полностью прозрачный
var pixelSetLen = 4*150*150, i;
for(i=3;i<pixelSetLen;i+=4)
 { pixelSet.data[i] = 255; // далаем его не прорачным
   if((i-3)%20 == 0) pixelSet.data[i-3] = 255; // каждый 5-й пиксель делаем красным
 }
ctx.putImageData(pixelSet, 20,20); // выводим изображение	

createLinearGradient()

Метод createLinearGradient создает объект линейного градиента.

Синтаксис

ctx.createLinearGradient(x1,y1,x2,y2)

Параметры

x1,y1

координаты начальной точки

x2,y2

координаты конечно точки

После создания объекта градиента, можно ему присвоить цвета с помощью метода addColorStop. Градиент появится на холсте после применения метода fill() или stroke().

Пример

init('createLinearGradient');
 var grd=ctx.createLinearGradient(10,80,280,80);
   grd.addColorStop(0.2,"red");
   grd.addColorStop(0.4,"black");
   grd.addColorStop(0.6,"green");
   grd.addColorStop(0.8,"yellow");
 ctx.fillStyle=grd;
 ctx.font="bold 40px Arial";
 ctx.fillText("Учим Canvas!", 10,80);

// По диагонале
 var grd=ctx.createLinearGradient(50,100,250,225);
   grd.addColorStop(0.2,"red");
   grd.addColorStop(0.4,"black");
   grd.addColorStop(0.6,"green");
   grd.addColorStop(0.75,"yellow");
 ctx.fillStyle=grd;
 ctx.fillRect(50,100, 200,125);

createPattern()

Метод createPattern позволяет размножать изображение.

Синтаксис

ctx.createPattern(image,type)

Параметры

image

объект Image

type

строка соответствующая одному из значений: repeat, repeat-x, repeat-y и no-repeat

Результат появится на холсте после применения метода fill() или stroke().

Перед применением метода следует убедиться, что изображение загружено.

Пример

init('createPattern');
// <img src="img/lamp.jpg" id="lamp" width="32" height="32" />
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,290,240);
ctx.fillStyle=pat;
ctx.fill();

createRadialGradient()

Метод createRadialGradient создает объект радиального градиента.

Синтаксис

ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)

Параметры

x1,y1,r1

координаты центра и радиус первой окружности

x2,y2,r2

координаты центра и радиус второй окружности

После создания объекта градиента, можно ему присвоить цвета с помощью метода addColorStop. Градиент появится на холсте после применения метода fill() или stroke().

Пример

init('createRadialGradient');
var grd=ctx.createRadialGradient(150,125,10,150,125,125);
 grd.addColorStop(0,"red");
 grd.addColorStop(0.2,"black");
 grd.addColorStop(0.3,"green");
 grd.addColorStop(0.6,"yellow");
 grd.addColorStop(0.8,"#00ffff");
 grd.addColorStop(0.9,"#ff00ff");

 ctx.fillStyle=grd;
 ctx.fillRect(40,15,220,220);

drawImage()

Метод drawImage выводит изображение на хосте. Имеет несколько вариантов синтаксиса с разными назначениями.

Синтаксис

// Отображать загруженную картинку.
ctx.drawImage( image, x, y )

// Масштабирование
ctx.drawImage( image,x,y,width,height )

// Обрезание
ctx.drawImage( image, sx, sy, sWidth, sHeight, dx, dy, width, height )

Параметры

image

Определяет изображение, холст, или видео элемент для использования

x,y

Координаты верхнего левого угла изображения

width, height

Размеры изображения на холсте.

sx, sy

Координаты верхнего левого угла слайса относительно изображения;

sWidth, sHeight

 Размеры слайса

dx, dy

Координаты верхнего левого угла обрезанного изображения

dWidth, dHeight

 Размеры обрезанного изображения на холсте

Пример

init('drawImage');
// <img id="scream" src="img/scream.jpg" alt="The Scream" width="220" height="277" />

// Поместить изображение на холсте, а также указать ширину и высоту изображения:
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10, 190, 240);

// Поместить обрезанную часть на холсте:
ctx.drawImage(img,90,130,50,60,220,100,50,60);

fill()

Метод fill делает заливку фигуры.

Синтаксис

ctx.fill()

Цвет заливки определяется свойством fillStyle. При вызове метода fill() все открытые фигуры будут закрыты автоматически, поэтому в таком случае можно не вызывать метод closePath().

Пример

init('fill');
ctx.fillStyle = "blue";
ctx.arc(150,125,100,0,2*Math.PI,false);
ctx.fill();

fillRect()

Метод fillRect заливает прямоугольную область цветом, определенный свойством fillStyle.

Синтаксис

ctx.fillRect(x,y,width,height)

Параметры

x и y

координаты левого верхнего угла прямоугольника

width

ширина прямоугольника

height

высота прямоугольника

Все параметры обязательны, должны быть положительными числами.

Пример

init('fillRect');
ctx.fillStyle = "#77aa77";
ctx.fillRect(50,50,200,150);

fillStyle

Свойство fillStyle определяет цвет заливки.

Синтаксис

ctx.fillStyle [ = value ]

value — имя цвета, или шестнадцатиричный код, или rgb/rgba. Если не задавать значение, тогда будет происходить чтение свойства.

По умолчанию установлено значение "#000000" (черный цвет).

Пример

init('fillStyle');
ctx.fillStyle = "#775533";
ctx.fillRect(50,50,200,150);

fillText()

Метод fillText рисует текст залитый цветом, определенным fillStyle.

Синтаксис

ctx.fillText(text, x, y [, maxWidth ] )

Параметры

text

текст, который будем рисовать

x,y

координаты верхнего левого угла текста

maxWidth

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

Пример

init('fillText');
ctx.font = "bold 64px Tahoma";
ctx.textAlign = "start";
ctx.fillText("Учим canvas", 50, 120, 200);

font

Свойство font определяет свойства шрифта.

Синтаксис

ctx.font [ = value ]

value — перечень свойств шрифта аналогично синтаксису в CSS.

Значение по умолчанию: '10px sans-serif'.

Пример

init('font');
ctx.font = "italic bold 24px Arial";
ctx.textBaseline = "Top";
ctx.fillStyle = "blue";
ctx.fillText("Учим canvas", 20, 50);

ctx.font = "normal normal 28px Tahoma";
ctx.textAlign = "left";
ctx.strokeText("canvas оживит сайты", 10, 150);

getImageData()

Метод getImageData возвращает данные о цвете (RGB) и прозрачности указанного участка холста.

Синтаксис

ctx.getImageData(sx, sy, sw, sh)

Параметры

sx и sy

координаты левого верхнего угла прямоугольника

sw

ширина участка

sh

высота участка

Возвращаемое значение

Метод возвращает объект ImageData, который копирует пиксельные данные для указанного прямоугольника на холсте. Например:

var imageData = ctx.getImageData(10,10,20,20);

Получим данные в таком виде:

• imageData.data[i+0] — значение красного цвета (число от 0 до 255);
• imageData.data[i+1] — значение зеленого цвета (число от 0 до 255);
• imageData.data[i+2] — значение синего цвета (число от 0 до 255);
• imageData.data[i+3] — значение прозрачности (число от 0 до 255);

i — номер пикселя

Пример

Скопировать данные пикселя для указанного изображения на холсте, а затем инвертировать цвета и поместить данные изображения обратно на холсте с putImageData():

init('getImageData');
// <img src="img/lamp.jpg" id="lamp" width="32" height="32" />
var img=document.getElementById("lamp");
ctx.drawImage(img,10,10);
var imgData=ctx.getImageData(10,10,32,32);
// Инвертировать цвета
 for (var i=0;i < imgData.data.length;i+=4)
   {
   imgData.data[i]=255-imgData.data[i];
   imgData.data[i+1]=255-imgData.data[i+1];
   imgData.data[i+2]=255-imgData.data[i+2];
   imgData.data[i+3]=255;
   }
ctx.putImageData(imgData,50,10);
ctx.font = '16px Arial';
ctx.fillText ('width: '+ imgData.width+'   height: '+imgData.height, 100,100);

globalAlpha

Свойство globalAlpha определяет уровень прозрачности.

Синтаксис

ctx.globalAlpha [ = value ]

value — число в диапазоне от 0 до 1.0 (0 — абсолютно прозрачно, 1 - абсолютно не прозрачно).

Значение по умолчанию: 1.

Если не задавать значение, тогда будет происходить чтение свойства.

Пример

Нарисовать красный прямоугольник, затем установить прозрачность (globalAlpha) до 0,5, а затем нарисовать синий и зеленый прямоугольники:

init('globalAlpha');
 ctx.fillStyle="red";
 ctx.fillRect(20,20,75,50);
 
 ctx.globalAlpha=0.2;
 ctx.fillStyle="blue"; 
 ctx.fillRect(50,50,75,50); 
 ctx.fillStyle="green"; 
 ctx.fillRect(80,80,75,50);

globalCompositeOperation

Свойство globalCompositeOperation определяет как будут себя вести перекрывающиеся фигуры.

Синтаксис

ctx.globalCompositeOperation [ = type ]

type — одно из зарезервированных значений:

• source-over (используется по умолчанию) — новое изображение рисуется по верх старого;
• destination-over — новые фигуры рисуются под уже нарисованными;
• source-in — отображается только та часть изображения, где фигуры пересекаются. Сверху новое изображение;
• destination-in — отображается только та часть изображения, где фигуры пересекаются. Сверху старое изображение;
• source-out — отображается только та часть нового изображения, которая не пересекается с другими фигурами;
• destination-out — отображается только та часть предшествующего изображения, которая не пересекается с другими фигурами;
• source-atop — у нового изображения отображается только та часть, которая пересекается с предшествующими фигурами;
• destination-atop — у предшествующего изображения отображается (поверх) только та часть, которая пересекается с новой фигурой;
• lighter — место пересечения фигур изменяет цвет на тот, которые получается путем сложения цветов пересекающихся фигур;
• darker — место пересечения фигур изменяет цвет на тот, которые получается путем вычитания цветов пересекающихся фигур;
• xor — место пересечения фигур прозрачно;
• copy — отображается только новая фигура, все остальное удаляется.

Пример

init('globalCompositeOperation');
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);

ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50); 

ctx.fillStyle="red";
ctx.fillRect(20,120,75,50);
ctx.globalCompositeOperation="lighter";
ctx.fillStyle="blue";
ctx.fillRect(50,150,75,50);

ctx.fillStyle="red";
ctx.fillRect(150,120,75,50);
ctx.globalCompositeOperation="xor";
ctx.fillStyle="blue";
ctx.fillRect(180,150,75,50); 

isPointInPath()

Метод isPointInPath возвращает true, если указанная точка находится внутри контура, и false — если вне его.

Синтаксис

ctx.isPointInPath(x, y)

Параметры

x, y

Координаты точки, которую проверяем на попадение в контур.

Пример

init('isPointInPath');
ctx.beginPath();
ctx.rect(50,50,100,50);
ctx.fill();
ctx.closePath();

var isPath = ctx.isPointInPath(50,50); // return true
var isPath2 = ctx.isPointInPath(1,1);  // return false
ctx.font = "14px Arial"
ctx.fillText ("isPath = " + isPath + ",  isPath2 = " + isPath2, 20,120 );

lineCap

Свойство lineCap определяет оформление концов линий.

Синтаксис

ctx.lineCap [ = value ]

Доступны три значения:

• butt — концы линий прямые (по умолчанию).
• round — концы линий скругленные.
• square — концы линий прямые, но к ней с обоих концов добавляется поле с шириной равной толщине линии и высотой равной половине от толщины линии.

Комментарии

При использовании значений round или squre, фактическая длина линии увеличивается на значение lineWidth (с двух сторон линии добавляются отрезки длинной lineWidth/2).

Пример

init('lineCap');
 // butt line cap (верхняя линия)
ctx.beginPath();
ctx.lineWidth = 40;
ctx.lineCap = "butt";
ctx.strokeStyle = "#0000ff";
ctx.moveTo(40, 70);
ctx.lineTo(260, 70);
ctx.stroke();
 
// round line cap (средняя линия)
ctx.beginPath();
ctx.strokeStyle = "#00ff00";
ctx.lineCap = "round";
ctx.moveTo(40, 112);
ctx.lineTo(260, 112);
ctx.stroke();

// square line cap (нижняя линия)
ctx.beginPath();
ctx.strokeStyle = "#ff0000";
ctx.lineCap = "square";
ctx.moveTo(40, 154);
ctx.lineTo(260, 154);
ctx.stroke();

lineJoin

Свойство lineJoin определяет оформление соединений линий.

Синтаксис

ctx.lineJoin [ = value ]

Доступны три значения:

• miter - острый угол (по умолчанию);
• round - скругленный угол;
• bevel - плоский угол.

Пример

init('lineJoin');
 var lineJoin = ['round','bevel','miter'];
 var color = ['#0077aa', '#77aa77', '#aa7700'];
ctx.lineWidth = 25;
for (var i=0;i < lineJoin.length;i++){
  ctx.lineJoin = lineJoin[i];
  ctx.beginPath();
  ctx.strokeStyle=color[i];
  ctx.moveTo(0,20+i*75);
  ctx.lineTo(50,80+i*75);
  ctx.lineTo(100,20+i*75);
  ctx.lineTo(150,80+i*75);
  ctx.lineTo(200,20+i*75);
  ctx.lineTo(250,80+i*75);
  ctx.lineTo(300,20+i*75);
  ctx.stroke();
  }

lineTo()

Метод lineTo рисует линию от текущего положения на холсте до точки (x, y). По этим координатам так же будет новое текущее положение на холсте.

Синтаксис

ctx.lineTo(x,y)

Параметры обязательны.

Пример

init('lineTo');
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,130);
ctx.lineTo(230,130);
ctx.lineTo(150,100);
ctx.lineWidth = 20;
ctx.stroke();

lineWidth

Свойство lineWidth определяет толщину линий.

Синтаксис

ctx.lineWidth [ = value ]

value — положительное число в пикселях. Если не задавать значение, тогда будет происходить чтение свойства.

Значение по умолчанию: 1.

Пример

init('lineWidth');
ctx.beginPath();
ctx.moveTo(50, 220);
ctx.strokeStyle="#aa7700"
ctx.lineTo(250, 50);
ctx.lineWidth = 40;
ctx.stroke();

measureText()

Метод measureText возвращает объект, содержащий ширину указанного текста в пикселях.

Синтаксис

ctx.measureText( text ).width

Параметры

text

Текст, который будет измеряться

init('measureText');
 ctx.font="bold 48px Arial";
 ctx.fillStyle="#ffaa00";
 var txt="Hello World";
 ctx.fillText(txt,10,120); 
 var w = ctx.measureText(txt).width;
 ctx.font="24px Arial";
 ctx.fillStyle="#117711";
 ctx.fillText("width:" + w,10,50);

miterLimit

Саойство miterLimit устанавливает или возвращает максимально допустимое расстояние для "дорисовки".

Свойство miterLimit работает только если свойство lineJoin имеет значение "miter".

При соединении линий с опцией miter, концы линий продлеваются на определенное расстояние чтобы соединиться. Это расстояние будет небольшим для больших углов и в разы больше для острых.

Синтаксис

ctx.miterLimit [ = value ]

value — число не менее 1.0 (значение меньше будет восприниматься как 1.0).

Значение по умолчанию: 10,0

Значение 1.0 означает отсутствие удлинения.

Пример

init('miterLimit');
// miterLimit=1
ctx.miterLimit=1;
ctx.beginPath();
ctx.moveTo(0,50);
ctx.lineWidth=7;
for (i=0;i < 27;i++){
 var dy = i%2==0 ? 75 : 25 ;
 ctx.lineTo(Math.pow(i,1.5)*2,dy);   }
ctx.stroke();


// miterLimit=10
ctx.miterLimit=10;
ctx.beginPath();
ctx.moveTo(0,150);
ctx.strokeStyle="#003377";
for (i=0;i < 27;i++){
 var dy = i%2==0 ? 175 : 125 ;
 ctx.lineTo(Math.pow(i,1.5)*2,dy);   }
ctx.stroke();

moveTo()

Метод moveTo перемещает текущие положение на холсте к координатам (x, y).

Синтаксис

ctx.moveTo(x,y)

Параметры обязательны.

Пример

init('moveTo');
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,250);
ctx.stroke();

putImageData()

Метод putImageData помещает на холст объект imageData (содержит RGBA информацию).

Синтаксис

ctx.putImageData(imageData, x, y [, dX, dY, dWidth, dHeight])

Параметры

imageData

объект, созданный с помощью метода createImageData() или полученный с помощью getImageData()

x и y

координаты левого верхнего угла размещаемого на холсте объекта относительно холста

dX, dY

координаты левого верхнего угла относительно изображения в imageData, от которого будут рассчитываться размеры изображения

dWidth, dHeight

  размеры размещаемого объекта (обрезается часть изображения, которая не вмещается в эти размеры)

Пример

init('putImageData');
ctx.fillStyle = "red";
ctx.fillRect(10,10,150,70);
ctx.fillStyle = "green";
ctx.globalAlpha = "0.5";
ctx.fillRect(120,50,70,70);

var Pixel1 = ctx.getImageData(10,10,180,110); 

ctx.putImageData(Pixel1,100,100,110,40,70,70); // отображаем только зеленый квадрат	

quadraticCurveTo()

Метод quadraticCurveTo рисует кривую Безье второго порядка от текущей точки на холсте до указанной через промежуточную (контрольную).

Синтаксис

ctx.quadraticCurveTo(controlX, controlY, endX, endY)

Параметры

controlX, controlY

 координаты контрольной точки

endX, endY

      координаты окончания кривой

Дуга отобразится после вызова метода stroke(). Цвет дуги определяет свойство strokeStyle, толщину линии — lineWidth. Текущее положение на холсте переместится в конец кривой.

Пример

init('quadraticCurveTo');
ctx.moveTo(75,25);
ctx.lineWidth=3;
ctx.strokeStyle="blue";
ctx.quadraticCurveTo(25,25,25,100,50,120,30,125);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();

restore()

Метод restore извлекает из стека состояние канвы. При этом извлекаются:

• примененные трансформации;
• значения свойств: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation
• контуры отсечения.

Синтаксис

ctx.restore()

Применяется в паре с методом save().

Пример

init('restore');
ctx.fillStyle = "red";
ctx.save();
ctx.fillRect(50,50,30,20);
	
ctx.fillStyle = "green";
ctx.save();
ctx.fillRect(80,50,30,20);
	
ctx.fillStyle = "blue";
ctx.fillRect(110,50,30,20);
	
ctx.restore();
ctx.fillRect(140,50,30,20);
	
ctx.restore();
ctx.fillRect(170,50,30,20);

rotate()

Метод rotate поворачивает полотно на заданный угол вокруг точки начала координат.

Синтаксис

ctx.rotate(angle)

Параметры

angle

Угол поворота в радианах.

Пример

init('rotate');
var color = ["aqua", "black", "blue", "fuchsia", "gray", 
             "green", "lime ", "maroon", "navy", "olive",
             "orange", "purple ", "red", "teal", "yellow"]
ctx.translate(180, 125);
for(var i = 0; i < 15; i++) {      
  ctx.beginPath();
  ctx.fillStyle=color[i];
  ctx.arc(0, 10 + 10 * i, 5 + i * 2, 0, Math.PI * 2, true);
  ctx.closePath();      
  ctx.fill();      
  ctx.rotate(Math.PI / 5); }

save()

Метод save сохраняет (помещает в стек) состояние канвы. При этом сохраняются:

• примененные трансформации;
• значения свойств: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation
• контуры отсечения.

Синтаксис

ctx.save()

Применяется в паре с методом restore().

Пример

init('save');
ctx.fillStyle = "red";
ctx.save();
ctx.fillRect(50,50,30,20);
	
ctx.fillStyle = "green";
ctx.save();
ctx.fillRect(80,50,30,20);
	
ctx.fillStyle = "blue";
ctx.fillRect(110,50,30,20);
	
ctx.restore();
ctx.fillRect(140,50,30,20);
	
ctx.restore();
ctx.fillRect(170,50,30,20);

scale()

Метод scale масштабирует единицы измерения холста.

Синтаксис

ctx.scale(kx, ky)

Параметры

kx, ky

Коэффициенты масштаба по осям X и Y.

Коэффициенты — любые действительные числа: числа больше 1.0 — увеличиваем масштаб, меньше 1, но больше 0 — уменьшаем. Значение 1.0 — масштаб остается без изменений.

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

Так же допускается использование отрицательных значений, с помощью которых можно добиться зеркальных отображений. Например, применив scale(1;-1), получим зеркальное отражение по оси Y.

Пример

init('scale');
ctx.fillRect(100,100,190,100);
	
ctx.scale(0.33,0.33); // уменьшаем в 3 раза
ctx.fillStyle="#77aa77";
ctx.fillRect(100,100,190,100); 

setTransform()

Метод setTransform делает сброс матрицы преобразования к единичной матрице, а затем вызывается метод transform с параметрами указанными в setTransform.

Другими словами, метод setTransform() позволяет масштабировать, вращать, перемещать и искажать текущий контекст.

Синтаксис

ctx.setTransform(m11, m12, m21, m22, dx, dy);

Параметры

dx, dy

Повторяют метод translate, смещая картинку на соответствующие значения.

m11, m22

Повторяют метод scale.

m12, m21

Каждый пиксель (x,y) смещается на y*m21 пикселей вправо и на x*m12 пикселей вниз. Это значит, что при m21=1 каждая следующая строчка будет смещена на 1 пиксель вправо, относительно предыдущей.

Пример

init('setTransform');
var a = 100, b = 50, x = 160, y = 25;
    
ctx.globalAlpha = 0.4;
    
ctx.fillStyle = 'red';
ctx.setTransform(1, 1.5, 0, 1, x, y);
ctx.fillRect(0, 0, a, b);
    
ctx.fillStyle = 'green';
ctx.setTransform(1, 1, 0, 1, x, y);    
ctx.fillRect(0, 0, a, b);
    
ctx.fillStyle = 'blue';
ctx.setTransform(1, 0.5, 0, 1, x, y);    
ctx.fillRect(0, 0, a, b);
    
ctx.fillStyle = 'red';
ctx.setTransform(-1, 1.5, 0, 1, x, y);
ctx.fillRect(0, 0, a, b);
    
ctx.fillStyle = 'green';
ctx.setTransform(-1, 1, 0, 1, x, y);    
ctx.fillRect(0, 0, a, b);
    
ctx.fillStyle = 'blue';
ctx.setTransform(-1, 0.5, 0, 1, x, y);    
ctx.fillRect(0, 0, a, b);

shadowBlur

Свойство shadowBlur устанавливает или возвращает уровень размытия для теней.

Синтаксис

ctx.shadowBlur [ = value ]

value - уровень размытия для тени.

Значение по умолчанию: 0.

Пример

init('shadowBlur');
 ctx.shadowBlur=30;
 ctx.shadowColor="black";
 ctx.fillStyle="red";
 ctx.fillRect(50,50,200,150); 

shadowColor

Свойство shadowColor задает цвет тени.

Синтаксис

ctx.shadowColor [ = value ]

Значением может быть имя цвета, шестнадцатеричный код, rgb/rgba представление.

Значение по умолчанию: "#000000".

Пример

init('shadowColor');
ctx.shadowOffsetX = 8;  
ctx.shadowOffsetY = 8;  
ctx.shadowBlur = 8;  
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.fillStyle = "green";
ctx.fillRect(50,50,200,150);

shadowOffsetX

Свойство shadowOffsetX задает смещение тени относительно объекта по оси X в пикселах.

Синтаксис

ctx.shadowOffsetX [ = value ]

По умолчанию смещение равно 0.

Положительные значения смещают тень вправо, отрицательные — влево.

Пример

init('shadowOffsetX');
ctx.shadowOffsetX = 15;  
ctx.shadowOffsetY = 8;  
ctx.shadowBlur = 8;  
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.fillStyle = "green";
ctx.fillRect(50,25,200,150);

shadowOffsetY

Свойство shadowOffsetY задает смещение тени относительно объекта по оси Y в пикселах.

Синтаксис

ctx.shadowOffsetY [= value]

По умолчанию смещение равно 0.

Положительные значения смещают тень вниз, отрицательные — вверх.

Пример

init('shadowOffsetY');
ctx.shadowOffsetX = 8;  
ctx.shadowOffsetY = 15;  
ctx.shadowBlur = 8;  
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.fillStyle = "blue";
ctx.fillRect(50,25,200,150);

stroke()

Метод stroke делает нарисованные контуры видимыми.

Синтаксис

ctx.stroke()

Пример

init('stroke');
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50,150);
ctx.lineTo(200,150);
ctx.stroke();

strokeRect()

Метод strokeRect рисует контур прямоугольника цветом, определенный свойством strokeStyle.

Синтаксис

ctx.strokeRect(x, y, width, height)

Параметры

x и y

координаты левого верхнего угла прямоугольника

width

ширина прямоугольника

height

высота прямоугольника

Все параметры обязательны, должны быть положительными числами.

Пример

init('strokeRect');
ctx.beginPath();
ctx.strokeStyle = "#77aa33";
ctx.lineWidth = 20;
ctx.strokeRect(50,50,200,150);

strokeStyle

Свойство strokeStyle oпределяет цвет линий.

Синтаксис

ctx.strokeStyle [ = value ]

value — имя цвета, или шестнадцатиричный код, или rgb/rgba. Если не задавать значение, тогда будет происходить чтение свойства.

По умолчанию установлено значение "#000000" (черный цвет).

Пример

init('strokeStyle');
ctx.beginPath();
ctx.moveTo(0, 250);
ctx.lineTo(300, 0);
ctx.strokeStyle = "#ff0000";
ctx.lineWidth=5;
ctx.stroke();

strokeText()

Метод strokeText рисует контур текста цветом, определенным strokeStyle.

Синтаксис

ctx.strokeText(text, x, y [, maxWidth ] )

Параметры

text

Текст, который будем рисовать

x,y

Координаты верхнего левого угла текста

maxWidth

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

Пример

init('strokeText');
ctx.font = "normal normal 48px Tahoma";
ctx.strokeStyle = "#115599";
ctx.strokeText("Учим canvas", 5, 100);

textAlign

Свойство textAlign определяет выравнивание текста.

Синтаксис

ctx.textAlign [ = value ]

value — один из следующих вариантов:

• start — значение по умолчанию, текст начинается с указанной позиции;
• end — текст завершается до указанной позиции;
• left — текст начинается с указанной позиции;
• right — текст завершается до указанной позиции;
• center — текст располагается по центру относительно указанной позиции.

Выравнивание происходит относительно указанных координат начала текста.

Значение start / left и right/ end совпадут когда к у нас направление текста ltr. И наоборот, start / right и left / end совпадут для rtl.

Пример

init('textAlign');
ctx.font = "italic bold 24px Arial";
ctx.textalign = "end";
ctx.fillStyle = "blue";
ctx.fillText("Учим canvas", 100, 150);

ctx.font = "normal normal 24px Tahoma";
ctx.textAlign = "center";
ctx.strokeText("canvas оживит сайты", 150, 60);

textBaseline

Свойство textBaseline возвращает / устанавливает выравнивание базовой линии.

Синтаксис

ctx.textBaseline [ = value ]

value — один из следующих вариантов (чтение и запись):

• top - выравнивание относительно верхней точки базовой линии.
• middle - выравнивание относительно середины базовой линии.
• bottom - выравнивание относительно нижнего края базовой линии.
• alphabetic (по умолчанию) - выравнивание относительно линии alphabetic
• hanging - выравнивание относительно линии hanging
• ideographic - выравнивание относительно линии ideographic

Пример

init('textBaseline');
 ctx.strokeStyle="red";
 ctx.moveTo(0,100);
 ctx.lineTo(299,100);
 ctx.stroke();

 ctx.font="16px Arial";

 ctx.textBaseline="top"; 
 ctx.fillText("Top",0,100); 
 ctx.textBaseline="bottom"; 
 ctx.fillText("Bottom",35,100); 
 ctx.textBaseline="middle"; 
 ctx.fillText("Middle",95,100); 
 ctx.textBaseline="alphabetic"; 
 ctx.fillText("Alphabetic",150,100); 
 ctx.textBaseline="hanging"; 
 ctx.fillText("Hanging",230,100);

toDataURL()

Метод toDataURL сохраняет в строку формата data:url изображение нарисованное на холсте.

Синтаксис

canvas.toDataURL( type, [quality] )

Параметры

type

Не обязательный. Строка с MIME-типом. По умолчанию "image/png"

quality

Не обязательный. Числовое значение от 0 до 1 показывающее качество сохраняемой картинки.

Возвращаемое значение

Строка в виде URL-адреса "data:", закодированую через base64.

Комментарии

Метод toDataURL() должен применяться к объекту canvas, а не к ctx.

Пример

init('toDataURL');
ctx.fillRect(10,10,20,20);
ctx.fillStyle = "green";
ctx.fillRect(40,40,20,20);

var scrImg = canvas.toDataURL("image/jpeg");
ctx.font="11px Arial";
ctx.fillStyle = "black";
ctx.fillText(scrImg.substr(0,40),5,100);
ctx.fillText(scrImg.substr(40,40),5,120);
ctx.fillText(scrImg.substr(80,40),5,140);
ctx.fillText(scrImg.substr(120,40),5,160);
ctx.fillText(scrImg.substr(160,40),5,180);
ctx.fillText(scrImg.substr(200,40),5,200);
ctx.fillText(scrImg.substr(240,20)+' . . .',5,220);

toBlob()

Метод toBlob Создаёт объект Blob представляющий изображение, содержащееся в canvas; этот файл может быть закеширован на диске или храниться в памяти на усмотрение пользователя.

Синтаксис

canvas.toBlob(callback, mimeType, qualityArgument)

Параметры

callback

Callback-функция с результирующим объектом Blob в качестве единственного аргумента.

mimeType

Аргумент определяющий формат изображения. По умолчанию image/png.

qualityArgument

Аргумент типа Numberсо значением от 0 до 1, определяющий качество изображения, если заявлен MIME-тип image/jpeg или image/webp. Если этот аргумент содержит нечто иное, для определения качества изображения будет использовано значение по умолчанию. Остальные аргументы проигнорируются.

Возвращаемое значение

Не возвращает ничего.

Пример

<img src=""  alt="" width=200 height=200 /><div id="comm" style="display:none">Картинка сохранена как «example.png»</div>
<script>
// берём любое изображение
let img = document.querySelector('img');

// создаём <canvas> того же размера
let canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;
var d=canvas.width;
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill()

// toBlob является асинхронной операцией, для которой callback-функция вызывается при завершении
canvas.toBlob(function(blob) {
  // после того, как Blob создан, загружаем его
  let link = document.createElement('a');
  link.download = 'example.png';

  link.href = URL.createObjectURL(blob);
  img.src=link.href;  document.getElementById("comm").style.display="block";
  link.click();

  // удаляем внутреннюю ссылку на Blob, что позволит браузеру очистить память
  URL.revokeObjectURL(link.href);
}, 'image/png');
</script>

transform()

Метод transform применяет нестандартную матрицу преобразования.

Метод transform действует точно также как setTransform, но в отличии от последнего не обнуляет каждый раз предыдущую трансформацию, а накладывается поверх неё.

Синтаксис

ctx.transform (m11, m12, m21, m22, dx, dy);

Параметры

dx, dy

Повторяют метод translate, смещая картинку на соответствующие значения.

m11, m22

Повторяют метод scale, изменяя размер отрысовываемых пикселей.

m12, m21

Каждый пиксель (x,y) смещается на y*m21 пикселей вправо и на x*m12 пикселей вниз. Это значит, что при m21=1 каждая следующая строчка будет смещена на 1 пиксель вправо, относительно предыдущей.

Пример

init('transform');
 ctx.fillStyle="yellow";
 ctx.fillRect(0,0,250,100)

 ctx.transform(1,0.5,-0.5,1,30,10);
 ctx.fillStyle="red";
 ctx.fillRect(0,0,250,100);

 ctx.transform(1,0.5,-0.5,1,30,10);
 ctx.fillStyle="blue";
 ctx.fillRect(0,0,250,100);

translate

translate Перемещает канву и начало координат в новое место.

Синтаксис

ctx.translate(x, y)

Параметры

x

расстояние, на которое переносим полотно по оси X

y

расстояние, на которое переносим полотно по оси Y

Примеры

init('translate');
ctx.fillStyle = "red";
ctx.fillRect(10,10,100,100);
	
ctx.translate(180,130);
ctx.fillStyle = "blue";
ctx.fillRect(10,10,100,100);

Крутой пример

<canvas width="600" height="450" id="Canvas"></canvas>
<script>
 var canvas = document.getElementById('Canvas'); // получаем элемент
 var ctx = canvas.getContext('2d'); // получаем объект canvas  

 var lastX = canvas.width * Math.random();
 var lastY = canvas.height * Math.random();
 var hue = 0;
 function line() {
   ctx.save();
   ctx.translate(canvas.width/2, canvas.height/2);
   ctx.scale(0.9, 0.9);
   ctx.translate(-canvas.width/2, -canvas.height/2);
   ctx.beginPath();
   ctx.lineWidth = 5 + Math.random() * 10;
   ctx.moveTo(lastX, lastY);
   lastX = canvas.width * Math.random();
   lastY = canvas.height * Math.random();
   ctx.bezierCurveTo(canvas.width * Math.random(),
                         canvas.height * Math.random(),
                         canvas.width * Math.random(),
                         canvas.height * Math.random(),
                         lastX, lastY);

   hue = hue + 10 * Math.random();
   ctx.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
   ctx.shadowColor = 'white';
   ctx.shadowBlur = 10;
   ctx.stroke();
   ctx.restore();  }
 setInterval(line, 50);

 function blank() {
   ctx.fillStyle = 'rgba(0,0,0,0.1)';
   ctx.fillRect(0, 0, canvas.width, canvas.height); }
 setInterval(blank, 40);

</script>