AnsweredAssumed Answered

Canvas in rotation using with 8 parameter draw_image function

Question asked by Kaushal Gajjar on Jun 30, 2018
Latest reply on Jun 30, 2018 by James Jones

Hello, 

      i'm creating photo collage using canvas. In one canvas in multiple image set in canvas.now I want to rotate images inside of canvas.how can i ?

i did code see below example.

 

 

<canvas id="myCanvas" width="450" height="360" style="border:1px solid #d3d3d3;"></canvas>

 


<script>

window.onload = function() {
drawRotated(canvas, context, img, 0, 0, 0, 225, 180);
drawRotated(canvas, context, img, 180, 225, 0, 225, 180);
drawRotated(canvas, context, img, 270, 0, 180, 225, 180);
drawRotated(canvas, context, img, 58, 225, 180, 225, 180);

 

function drawRotated(canvas, context, images,degrees, left, top, width, height){


context.save();

if(degrees > 0 )
{
context.translate(width / 2, height / 2);

context.rotate(degrees * Math.PI / 180);

left = (width / 2) * -1;

top = (height / 2) * -1;

context.drawImage(images,129.25721906550834, 56.157980730897, 525, 255.45847176079735,left, top, width, height);


}else{
context.drawImage(images,0,0,640,426,left, top, width, height);
}

context.restore();

}

}

</script>

 


What i want here ?

8 parameter draw_image function using create collage in one canvas and no one image overwrite on other collage images how can i do that? please,give ideas and suggest me .

Below i attached code.

Thank You     

Attachments

Outcomes