Как нарисовать картинку с измененным размером вместо линии? (холст html5)

Question

Таким образом, у нас может быть, например, такая функция для рисования линии

function drawLine(g, n, x1, y1, x2, y2){
    g.beginPath();
    g.lineWidth = n > 0 ? n : 1;
    g.strokeStyle = "rgb(0, 128, 32)";
    g.moveTo(x1, y1);
    g.lineTo(x2, y2);
    g.stroke();
}

но что, если мы хотим нарисовать изображение вместо линии (изменено с учетом размера линии, с альфа-каналом).

Как это сделать?

Answer 1

Используйте метод drawImage() контекста, но сначала translate, rotate и scale контекста. Изображение получится в виде длинной тонкой линии, повернутой как вам угодно.

Редактировать : Я разместил живой пример этой техники онлайн , оборачивая технику как функцию.