# Processing X P5JS (image quality on canvas)
**URL:** https://discourse.processing.org/t/processing-x-p5js-image-quality-on-canvas/34272
**Category:** Coding Questions
**Created:** [December 24, 2021, 12:42am UTC](https://discourse.processing.org/t/processing-x-p5js-image-quality-on-canvas/34272 "2021-12-24T00:42:46Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@vargas](https://discourse.processing.org/u/vargas)
#### Post date: [December 24, 2021, 12:42am UTC](https://discourse.processing.org/t/processing-x-p5js-image-quality-on-canvas/34272/1 "2021-12-24T00:42:46Z")
I have transferred a processing code to P5JS. In it I use an image with rotation and all axes. But image quality on P5JS canvas is not the same as on processing. Does anybody know how to solve this?
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [December 24, 2021, 11:50am UTC](https://discourse.processing.org/t/processing-x-p5js-image-quality-on-canvas/34272/2 "2021-12-24T11:50:11Z")
Hi @vargas,
Can you provide a minimal code example for both Processing and p5.js so everyone can reproduce it? (use an online image so we don’t have to download an image)
> [@vargas](#):
>
> But image quality on P5JS canvas is not the same as on processing.
This can be expected since they don’t use the same renderer (either [awt](https://docs.oracle.com/javase/tutorial/2d/overview/rendering.html), [JavaFX](https://openjfx.io/) or [JogAmp](https://jogamp.org/) in Processing and [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) / [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) for p5.js)
---
### Author:  [@vargas](https://discourse.processing.org/u/vargas)
#### Post date: [December 24, 2021, 6:15pm UTC](https://discourse.processing.org/t/processing-x-p5js-image-quality-on-canvas/34272/3 "2021-12-24T18:15:22Z")
\*PROCESSING CODE, HERE I JUST USED AN IMAGEM FROM INTERNET.
PImage webImg;
float angle;
void setup(){
size(600,600,P3D);
background(0);
String url = “[https://i1.wp.com/arteref.com/wp-content/uploads/2019/09/antropofagia.jpg?fit=900%2C700&ssl=1](https://i1.wp.com/arteref.com/wp-content/uploads/2019/09/antropofagia.jpg?fit=900%2C700&ssl=1)”;
// Load image from a web server
webImg = loadImage(url, “jpg”);
}
void draw(){
background(0);
float s = 25;
for(float x = 0;x\<=width;x+=s){
for(float y= 0;y\<=height;y+=s){
pushMatrix();
```
float f = radians(pmouseY + pmouseY);
float f2 = radians(pmouseX + pmouseX);
f = map(f, -1,1,0,255);
translate(x,y,-f2*50);
angle += 0.5;
rotateY(pmouseX);
rotateZ(angle++);
rotateX(pmouseY);
image(webImg, 0,0);
popMatrix();
}
```
}
}
---
### Author:  [@vargas](https://discourse.processing.org/u/vargas)
#### Post date: [December 24, 2021, 6:21pm UTC](https://discourse.processing.org/t/processing-x-p5js-image-quality-on-canvas/34272/4 "2021-12-24T18:21:22Z")
I actually have a lot of problems here. For example, with PROCESSING I use (angle += 0.5;) without needing to set a previous value. In P5JS I need to set an initial value and that makes a lot of difference in the output image. I would like to upload this code on the web, but my attempts fail. The output image is never the same.
---
### Author:  [@vargas](https://discourse.processing.org/u/vargas)
#### Post date: [December 24, 2021, 6:28pm UTC](https://discourse.processing.org/t/processing-x-p5js-image-quality-on-canvas/34272/5 "2021-12-24T18:28:05Z")
\*P5JS CODE
var angle = 1.0;
let img;
let f;
let f2;
function preload() {
img = loadImage(“ffff.png”);
}
function setup() {
//imageMode(CORNER);
createCanvas(windowWidth, windowHeight, WEBGL);
background(0);
}
function draw() {
background(0);
var s = 25;
for (let x = 0; x \<= width; x += s) {
for (let y = 0; y \<= height; y += s) {
push();
```
f = radians(pmouseY + pmouseY);
f2 = radians(pmouseX + pmouseX);
f = map(f, -1, 1, 0, 255); //texto??
translate(x, y, -f2 * 50);
angle += 0.5;
rotateY(pmouseX);
rotateZ(angle++);
rotateX(pmouseY);
image(img, -500, 0);
pop();
}
```
}
}
---
### Author:  [@KumuPaul](https://discourse.processing.org/u/KumuPaul)
#### Post date: [December 25, 2021, 1:26am UTC](https://discourse.processing.org/t/processing-x-p5js-image-quality-on-canvas/34272/6 "2021-12-25T01:26:00Z")
> [@vargas](#):
>
> with PROCESSING I use (angle += 0.5;) without needing to set a previous value. In P5JS I need to set an initial value and that makes a lot of difference in the output image.
This doesn’t make sense. In Java, and therefore in Processing, a variable with type `int` will automatically be initialized to `0`, so one thing that is making the initial output of your p5.js sketch different is that you’ve chosen to initialize this variable to `1.0`
---
### Author:  [@vargas](https://discourse.processing.org/u/vargas)
#### Post date: [December 26, 2021, 11:58am UTC](https://discourse.processing.org/t/processing-x-p5js-image-quality-on-canvas/34272/7 "2021-12-26T11:58:20Z")
Thanks KumuPaul, but why do the codes still have different output images (processing and P5JS)?
---
### Author:  [@KumuPaul](https://discourse.processing.org/u/KumuPaul)
#### Post date: [December 26, 2021, 11:44pm UTC](https://discourse.processing.org/t/processing-x-p5js-image-quality-on-canvas/34272/8 "2021-12-26T23:44:06Z")
> [@vargas](#):
>
> but why do the codes still have different output images
To be honest when I run the code you posted in processing 4 vs p5.js 1.4.0 it looks pretty similar to me, however it is quite chaotic and rapidly animated so thorough comparison is pretty difficult. You’re going to need to be more specific about the differences you’re observing and preferably provide some code that results in more static sketches.