multiple images in canvas html

Question

I need to display a few images which will be one on top of the other in some parallel areas. What is the right way to do it if each image should be rotated in a different angle and located in different coordinates (x,y)?

Do I need to draw them on a single canvas and somehow rotate them differently in that canvas, or should I create different canvas for each image? once I created different canvas for each image, it displayed only the last image and the canvases were one next to the other with no parallel areas..

Thanks...

Nothing here you can use? stackoverflow.com/questions/3878319/… — mplungjan
– mplungjan, Commented Mar 23, 2011 at 13:13

towc · Accepted Answer · 2015-10-30 08:53:44Z

canvas has those very useful transforms that you can use. What you need right now is canvas' .translate and .rotate

Let's say you make a function which takes an img image, x coordinate, y coordinate and rad rotation to your top left corner argument, this is how you'd do it:

function displayRotatedImage( img, x, y, rad ){

    ctx.translate( x, y ); // ctx is your canvas context
    ctx.rotate( rad );
    ctx.drawImage( img, 0, 0 );
    ctx.rotate( -rad ); // don't forget to get everything to its previous state!
    ctx.translate( -x, -y );


}

Do you see what's going on? first of all we move to the pivot of the rotation using .translate, then we rotate around that pivot using .rotate, and we draw our image relatively to our system, and since 0 0 is our pivot point now, thanks to the translate, we simply draw the image at 0 0. Now we have to derotate and detranslate to get the canvas to it's original transform ;)

Collectives™ on Stack Overflow

multiple images in canvas html

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related