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

So we can have for example such 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(开发者_C百科);
}

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

How to do such thing?

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

Edit: I've put a live example of this technique online, wrapping the technique up as a function.