# Rotate canvas around its center
**URL:** https://discourse.processing.org/t/rotate-canvas-around-its-center/34990
**Category:** Coding Questions
**Created:** [February 5, 2022, 11:06am UTC](https://discourse.processing.org/t/rotate-canvas-around-its-center/34990 "2022-02-05T11:06:50Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@res56](https://discourse.processing.org/u/res56)
#### Post date: [February 5, 2022, 11:06am UTC](https://discourse.processing.org/t/rotate-canvas-around-its-center/34990/1 "2022-02-05T11:06:51Z")
Hi frens,
I use the draw function to display objects of the class Mover.
After the objects are displayed I want to rotate the result around the center.
```auto
function draw() {
if(frameCount < 600){
for (var i = 0; i < myMover1.length; i++) {
myMover1[i].update(count);
myMover1[i].distance(myMover1);
}
for (var i = 0; i < myMover2.length; i++) {
myMover2[i].update(count);
myMover2[i].distance(myMover2);
}
for (var z = 0; z < myMover3.length; z++) {
myMover3[z].update(count);
myMover3[z].distance(myMover3);
}
for (var z = 0; z < myMover4.length; z++) {
myMover4[z].update(count);
myMover4[z].distance(myMover4);
}
}
else{
//Rotate Canvas
}
}
```
Is it possible to rotate the whole canvas around its center?
Thanks in advance,
Theresa
---
### Author:  [@Flolo](https://discourse.processing.org/u/Flolo)
#### Post date: [February 5, 2022, 2:21pm UTC](https://discourse.processing.org/t/rotate-canvas-around-its-center/34990/2 "2022-02-05T14:21:04Z")
Hey
first of all I think you mean p5js and not Processing.(so please change that 😄 )
These are the functions you need:
[Translate](https://p5js.org/reference/#/p5/translate)
[Rotate](https://p5js.org/reference/#/p5/rotate)
I hope this can help you it is a little example:
Flolo 😄
> **Click to see code**
>
> ```auto
> let cols = 20;
> let cellSize;
>
> function setup() {
> createCanvas(600, 600);
> cellSize = min(width, height) / cols;
> }
>
> function draw() {
> background(0);
> translate(width/2, height/2);
> rotate(frameCount * 0.001);
> drawGrid();
> }
> function drawGrid() {
> stroke(255);
> strokeWeight(2);
> translate(-width/2, -height/2);
> for (let i = 0; i < cols; i++) {
> for (let j = 0; j < cols; j++) {
> let x = i * cellSize;
> let y = j * cellSize;
> let filled = (i + j) % 2 == 0;
> if (filled) {
> fill(255);
> } else {
> noFill();
> }
> rect(x, y, cellSize, cellSize);
> }
> }
> }
>
> ```
https://editor.p5js.org/flolow2005/full/Xyctl7-AH
---
### Author:  [@res56](https://discourse.processing.org/u/res56)
#### Post date: [February 6, 2022, 7:48pm UTC](https://discourse.processing.org/t/rotate-canvas-around-its-center/34990/3 "2022-02-06T19:48:13Z")
Hi Flolo,
thanks for the reply. The thing is that:
The object is generated in draw (out of many object lines). After the generation finished the result should be rotated around its center.
I used frameCount to stop the generation. But not the complete result is rotated but only single lines.
My idea was to save the canvas as image and re-load it…
Find the result of draw attached…
Thanks in advance
---
### Author:  [@Flolo](https://discourse.processing.org/u/Flolo)
#### Post date: [February 6, 2022, 9:46pm UTC](https://discourse.processing.org/t/rotate-canvas-around-its-center/34990/4 "2022-02-06T21:46:07Z")
Hi,
maybe there’s something to be gained by painting it on a Graphics and then rotating it.
I modified my previous example:
> **Click to see Code**
>
> ```auto
> let img;
> let cols = 20;
> let cellSize;
>
> function setup() {
> createCanvas(600, 600);
> img = createGraphics(width, height);
> cellSize = min(width, height) / cols;
> }
>
> function draw() {
> background(0);
> translate(width/2, height/2);
> rotate(frameCount * 0.001);
> image(img, -width/2, -height/2)
> drawGrid();
> }
> function drawGrid() {
> img.stroke(255);
> img.strokeWeight(2);
> for (let i = 0; i < cols; i++) {
> for (let j = 0; j < cols; j++) {
> let x = i * cellSize;
> let y = j * cellSize;
> let filled = (i + j) % 2 == 0;
> if (filled) {
> img.fill(255);
> } else {
> img.noFill();
> }
> img.rect(x, y, cellSize, cellSize);
> }
> }
> }
>
> ```
https://editor.p5js.org/flolow2005/full/UibSj29RQ
Its the same outcome but with a Graphics 😄
Flolo
---
### Author:  [@res56](https://discourse.processing.org/u/res56)
#### Post date: [February 12, 2022, 9:35am UTC](https://discourse.processing.org/t/rotate-canvas-around-its-center/34990/5 "2022-02-12T09:35:41Z")
Hi Flolo,
thanks for the hint, I’m closer but the rotating image is not the complete one. Its only a part of the origin.
Do you have an Idea?
Thanks in advance,
Theresa
---
### Author:  [@res56](https://discourse.processing.org/u/res56)
#### Post date: [February 12, 2022, 10:29am UTC](https://discourse.processing.org/t/rotate-canvas-around-its-center/34990/6 "2022-02-12T10:29:16Z")
Okay, now I have the complete graphic in the image.
But this sktetch demonstrate my problem. If I have an Image and want to rotate it around the center it looks like the outer smaller rect.
If I use the rect-function and add rectMode(CENTER) it works. But imageMode(CENTER) does not work.
---
### Author:  [@res56](https://discourse.processing.org/u/res56)
#### Post date: [February 12, 2022, 10:39am UTC](https://discourse.processing.org/t/rotate-canvas-around-its-center/34990/7 "2022-02-12T10:39:15Z")
```auto
let img;
var angle=0;
function setup() {
createCanvas(400, 400);
img = createGraphics(width, height);
angleMode(DEGREES);
imageMode(CENTER);
img.fill(255,255,255);
///img.line(v1.x, v1.y, v2.x,v2.y);
img.rect(0,0,200,200);
//rect(0,0,200,200);
}
function draw() {
background(0,255,0);
translate(width/2, height/2);
rotate(angle);
//rectMode(CENTER);
fill(255);
imageMode(CORNER);
image(img,-width/2, -height/2);
angle=angle+1;
}
```
---
### Author:  [@res56](https://discourse.processing.org/u/res56)
#### Post date: [February 12, 2022, 3:04pm UTC](https://discourse.processing.org/t/rotate-canvas-around-its-center/34990/8 "2022-02-12T15:04:13Z")
The problem is, that I call the generate/drawStuff() Method before I translate and rotate…
But this is necassary bc I generate the graphic before…and if generation is finished it should be rotated…
---
### Author:  [@res56](https://discourse.processing.org/u/res56)
#### Post date: [February 12, 2022, 10:28pm UTC](https://discourse.processing.org/t/rotate-canvas-around-its-center/34990/9 "2022-02-12T22:28:49Z")
Okay…finally it works…
[https://creatorbox.de/genart/apps/ayezooloop/](https://creatorbox.de/genart/apps/ayezooloop/)
Thanks for your support!