-1

I'm relatively new to JavaScript, so I'm not sure if a canvas rotation is the best way of achieving what I want to see or not, so here is the context.

I have a web-page that people interact with. I am interested in seeing how these interactions change when the contents of the whole screen rotates (by an arbitrary amount). I therefore need a way of rotating all my elements (which consists of some pre-determined images and some text) on the screen.

I can transform the coordinates of each individual element, but I was wondering if there is a way of simply rotating the whole "screen", or canvas, in software, such that everything on the canvas is still in the same place and at the same orientation, but now the whole canvas has rotated by $x$ degrees.

I haven't been able to find how to do this online, partly because I don't know what I'm looking for. Perhaps the canvas isn't actually what I want to rotate, but rather something else? Please advise.

Pablo
  • 220
  • 2
  • 13
  • 1
    Could you just rotate the body of the page using the css transform rotate Z rule? https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotatez `transform: rotateZ(10deg);` – Stuart Nichols Jun 01 '23 at 13:54
  • 2
    The term *canvas* can easily be confused with the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element. What you're referring to is rotating the entire document or [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body). Follow up on Stuart's suggestion as that is the appropriate CSS property to use in this case. – Emiel Zuurbier Jun 01 '23 at 14:04
  • 1
    Does this answer your question? [html rotate entire canvas by 90 degrees](https://stackoverflow.com/questions/18118068/html-rotate-entire-canvas-by-90-degrees) – Apodemus Jun 01 '23 at 14:11
  • Good point @EmielZuurbier. If it is the `` element then the comment by @Apodemus is the way to go, otherwise here is an answer to do it on an HTML element: https://stackoverflow.com/questions/19126432/rotate-a-div-using-javascript – Stuart Nichols Jun 01 '23 at 14:45

1 Answers1

0

I assume you already know how to use canvas context and how to update the canvas. if not you might want to look that up. I also assume you initalize your canvas in html.

function start() {
ctx = document.getElementById("canvas").getContext("2d");
  var xMove = 70; //movement x
    var yMove = 100; //movement y
var height = 30; //object height
var width = 50; //object width
//get canvas context by id
var ctx = document.getElementById("canvas").getContext("2d");

        //save current context
        ctx.save();
        //move object
        ctx.translate(xMove, yMove);  
        //rotate our object      
        ctx.rotate(45);
        //color
        ctx.fillStyle = "red";
        //fill object
        ctx.fillRect(width / -2, height / -2, width, height); 
        //finally restore context       
        ctx.restore();    
        }
<!DOCTYPE html>
<html>

<body onload="start()">
<canvas id="canvas"></canvas>
</html>
 ctx = document.getElementById("canvas").getContext("2d");
  var xMove = 30; //movement x
    var yMove = 30; //movement y
var height = 30; //object height
var width = 50; //object width
//get canvas context
var ctx = document.getElementById("canvas").getContext("2d");

        //save current context
        ctx.save();
        //move object
        ctx.translate(xMove, yMove);  
        //rotate our object      
        ctx.rotate(45);
        //color
        ctx.fillStyle = "red";
        //fill object
        ctx.fillRect(width / -2, height / -2, width, height); 
        //finally restore context       
        ctx.restore();
octoCat
  • 38
  • 8