How to make HTML element **not** rotatable on iPad?

I'm currently developing a little 开发者_如何学CHTML5 Canvas/JavaScript based drawing application aimed for iPad. It runs in Safari. So far everything has worked great except for one thing.

If I rotate the device, my UI reorients itself. This is cool for most of the UI except for the canvas itself. Is there some way to force the canvas not to be rotated?

How about setting up orientation specific CSS:

<link rel="stylesheet" type="text/css" href="css/landscape.css" media="all and (orientation:landscape)">
<link rel="stylesheet" type="text/css" href="css/portrait.css" media="all and (orientation:portrait)">

and putting:

-webkit-transform: rotate(-90deg)

in one of the two orientations to counteract the automatic rotation?

In case someone wonders how to implement Alnitak's answer in practice, here you go:

CSS:

@media all and (orientation:portrait) {
    #myCanvas {
        -webkit-transform: rotate(270deg)
    }    
}

Alternatively you can use separate CSS files if you want to.

In order to get the canvas coordinate system in sync with this you can use something along this:

ctx.save();

...

if(window.orientation == 0 || window.orientation == 180) {
    ctx.translate(canvasWidth, 0);
    ctx.rotate(Math.PI / 2);
}

...

ctx.restore();

There might be some other ways to achieve the same result but this seemed to work ok for me. Note that it's a good idea to save/restore context state so you don't mess it up on rotate.