Context.drawImage(image, x, y),

где image передает выводимое изображение, x и y – координаты верхнего левого угла изображения.

<script>

let canvas = document.getElementById("myCanvas"),

context = canvas.getContext("2d");

let img = new Image();

img.src = "dubi.png";

img.onload = function() {

context.drawImage(img, 0, 0);

};

</script>

Другая версия метода позволяет дополнительно задать ширину и высоту выводимого изображения: context.drawImage(img, 20, 40, 110, 90);

Добавление теней

Элемент canvas поддерживает добавление теней к нарисованным объектам. Для создания теней применяются следующие свойства:

shadowOffsetX – горизонтальное смещение в пикселях справа (или слева при отрицательном значении);

shadowOffsetY – вертикальное смещение;

shadowBlur – число пикселей для установки размытия тени;

shadowColor – цвет тени.

Трансформации

Элемент canvas поддерживает трансформацию.

Перемещение осуществляется методом translate(): translate(x, y),где параметр указывает на смещение по осям.

Для поворота фигур применяется метод rotate(): rotate(angle),

где в качестве параметра передается угол поворота в радианах относительно точки с координатами (0,0)

Для масштабирования фигур применяется метод scale(): scale(xScale, yScale),

где параметр xScale указывает на масштабирование по оси х, а параметр yScale – по оси y.

Рисование мышью

В canvas можно создавать фигуры динамически, рисуя указателем мыши. Для обработки движения мыши определяются три обработчика – нажатие мыши, перемещение и отпускание мыши. При нажатии мыши устанавливаем переменную draw равным true, т.е. идет рисование. Также при нажатии мы фиксируем точку, с которой будет идти рисование.

При перемещении мыши получаем точку, на которую переместился указатель, и рисуем линию. При отпускании указателя закрываем графический путь методом context.closePath() и сбрасываем переменную draw в false.

<script>

let canvas = document.getElementById("myCanvas"),

context = canvas.getContext("2d"),

w = canvas.width,

h=canvas.height;

let mouse = { x:0, y:0};

let draw = false;

canvas.addEventListener("mousedown", function(e){

mouse.x = e.pageX - this.offsetLeft;

mouse.y = e.pageY - this.offsetTop;

draw = true;

context.beginPath();

context.moveTo(mouse.x, mouse.y);

});

canvas.addEventListener("mousemove", function(e){

if(draw==true){

mouse.x = e.pageX - this.offsetLeft;

mouse.y = e.pageY - this.offsetTop;

context.lineTo(mouse.x, mouse.y);

context.stroke();

}

});

canvas.addEventListener("mouseup", function(e){

mouse.x = e.pageX - this.offsetLeft;

mouse.y = e.pageY - this.offsetTop;

context.lineTo(mouse.x, mouse.y);

context.stroke();

context.closePath();

draw = false;

});

</script>