Question

59

Rotate canvas 90 degrees clockwise and update width height

rated 0 times [ 63] [ 4] / answers: 1 / hits: 24250 / 11 Years ago, mon, may 20, 2013, 12:00:00

Say we have a canvas:

<canvas id=one width=100 height=200></canvas>

And on a button click the canvas gets rotated 90 degrees clockwise (around the center) and the dimensions of the canvas get also updated, so in a sense it looks like this afterwards:

<canvas id=one width=200 height=100></canvas>

Note that the id of the canvas is the same.

Imagine simply rotating an image clockwise without it being cropped or being padded.

Any suggestions before I do it the long way of creating a new canvas and rotating and copying pixel by pixel?

UPDATE sample code with suggestion from comments still not working:

function imageRotatecw90(){



    var canvas = document.getElementById(one);

    var context = canvas.getContext(2d);



    var cw=canvas.width;

    var ch=canvas.height;



    var myImageData = context.getImageData(0,0, cw,ch);



    context.save();



    context.translate(cw / 2, ch / 2);

    context.rotate(Math.PI/2);



    context.putImageData(myImageData, 0, 0);



    context.restore();



    canvas.width=ch;

    canvas.height=cw;

}

FiddleJS

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harleyterryp

Add To Favorites

Follow

Total Points: 290

Total Questions: 92

Total Answers: 95

Location: Montenegro

Member since Sun, May 7, 2023

1 Year ago

harleyterryp questions

1 error Filters are deprecated how to solve this error in vue.js 3

Fri, Jun 11, 21, 00:00, 3 Years ago

1 How to Insert an image inside an input field in react js?

Fri, May 28, 21, 00:00, 3 Years ago

1 ElectronJS: Uncaught TypeError: Cannot read property BrowserWindow / getCurrentWindow of undefined

Mon, Nov 23, 20, 00:00, 4 Years ago

1 Access React context API from _app in NextJS

Fri, Oct 2, 20, 00:00, 4 Years ago

1 jsPDF with AutoTable not working - Possible JavaScript issue

Sun, Jun 28, 20, 00:00, 4 Years ago

View All

answered 11 Years ago mercedez · Accepted Answer

Look at this DEMO.

To achieve the results seen in demo, I made use of canvas.toDataURL to cache the canvas into an image, then reset the canvas to their new dimensions, translate and rotate the context properly and finally draw the cached image back to modified canvas.

That way you easily rotate the canvas without need to redraw everything again. But because anti-aliasing methods used by browser, each time this operation is done you'll notice some blurriness in result. If you don't like this behavior the only solution I could figure out is to draw everything again, what is much more difficult to track.

Here follows the code:

var canvas = document.getElementById(one);

var context = canvas.getContext(2d);

var cw = canvas.width;

var ch = canvas.height;



// Sample graphic

context.beginPath();

context.rect(10, 10, 20, 50);

context.fillStyle = 'yellow';

context.fill();

context.lineWidth = 7;

context.strokeStyle = 'black';

context.stroke();



// create button

var button = document.getElementById(rotate);

button.onclick = function () {

    // rotate the canvas 90 degrees each time the button is pressed

    rotate();

}



var myImageData, rotating = false;   



var rotate = function () {

    if (!rotating) {

        rotating = true;            

        // store current data to an image

        myImageData = new Image();

        myImageData.src = canvas.toDataURL();



       myImageData.onload = function () {

            // reset the canvas with new dimensions

            canvas.width = ch;

            canvas.height = cw;

            cw = canvas.width;

            ch = canvas.height;



            context.save();

            // translate and rotate

            context.translate(cw, ch / cw);

            context.rotate(Math.PI / 2);

            // draw the previows image, now rotated

            context.drawImage(myImageData, 0, 0);               

            context.restore();



            // clear the temporary image

            myImageData = null;



            rotating = false;               

        }

    }

}