cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
kausal
Community Member

Canvas in rotation using with 8 parameter draw_image function

Jump to solution

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 Smiley Happy    

1 Solution

Accepted Solutions
James
Community Champion

 @kausal , 

I think you might be confusing the HTML5 graphics canvas element with the Canvas learning management system. This is a global community for the learning management system. Canvas (the software) does not directly support canvas (the HTML5 element) or scripts within user content.

There is the possibility that you are trying to include the canvas element within a Canvas content page. If so, you will need to either embed the your page using an iframe or add some custom JavaScript to your Canvas instance that supports what you're trying to do. Neither one of those is the question that you're asking about, which is why I suspect that you've got the wrong canvas.

You can get ideas on how to use the HTML5 canvas element's rotate command online. Here are a few places that came up when I searched.

View solution in original post

1 Reply
James
Community Champion

 @kausal , 

I think you might be confusing the HTML5 graphics canvas element with the Canvas learning management system. This is a global community for the learning management system. Canvas (the software) does not directly support canvas (the HTML5 element) or scripts within user content.

There is the possibility that you are trying to include the canvas element within a Canvas content page. If so, you will need to either embed the your page using an iframe or add some custom JavaScript to your Canvas instance that supports what you're trying to do. Neither one of those is the question that you're asking about, which is why I suspect that you've got the wrong canvas.

You can get ideas on how to use the HTML5 canvas element's rotate command online. Here are a few places that came up when I searched.

View solution in original post