How to draw a modified picture instead of a line? (html5 canvas)

Question

Thus, we can have, for example, such a function to draw a line

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();
}

but what if we want to draw an image instead of a line (resized in relation to the size of the line, with an alpha channel).

How to do it?

Answer 1

Use the drawImage()context method , but first translate, rotateand thescale context. The image will come out as a long thin line rotated as you like.

Change . I posted an example of this method on the Internet , wrapping the technique as a function.