HTML5 canvas, user drawing resize and rotate

Question

I have a canvas on which the user can draw with some sort of pen. The canvas height is slightly larger than the width. The actual size depends on several variables. I want to give the user the ability to rotate his/her drawing. I'm creating a new canvas on which i draw the old canvas rotated.

Below is how i did 180 degrease.

if(rotation==180){
    ctx.translate(canvas.width/2, canvas.height/2);
    ctx.rotate(Math.PI);
    ctx.translate(-canvas.width/2, -canvas.height/2);
    ctx.drawImage(drawing,0,0);
}

Now for the 90 degrease I also have to do a resize because otherwise it won´t fit anymore. I'm not even sure where to start. Any ideas on how to do this?

You want to rotate the canvas or the drawing? The way I understand, it seems you're only allowing your user to rotate the whole image (i.e. the canvas) by multiples of 90, like you would rotate in MS Paint. — Rikonator, Oct 20 '12 at 17:29

score 0 · Answer 1 · answered Oct 20 '12 at 16:37

0

u can use CSS3 for rotation:like

h1
{
rotation-point:50% 50%;
rotation:180deg;
}

answered Oct 20 '12 at 16:37

Fatima Zohra

2,929
2
17
17

It is my intention to be able to 'store' the result. Therefor CSS rotation isn't going to work. Thanks though. – user6 Oct 24 '12 at 07:47

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

See this posts

HTML5 canvas image rotate left rotate right

http://phptechworld.blogspot.in/2012/10/html5-canvas-image-rotation.html

edited May 23 '17 at 12:03

Community

1
1

answered Oct 23 '12 at 09:09

vvr02

611
2
12
22

HTML5 canvas, user drawing resize and rotate

2 Answers2