CODEWITHSUNDEEP
javascripthtmlcanvasdrawing
Rella
Rella

Reputation: 66935

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

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?

Upvotes: 3

Views: 326

Answers (1)

Phrogz
Phrogz

Reputation: 303136

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.

Upvotes: 1

Related Questions