# Main canvas and createGraphics() off screen canvas not matching

**URL:** <https://discourse.processing.org/t/main-canvas-and-creategraphics-off-screen-canvas-not-matching/26706>\
**Category:** Coding Questions\
**Created:** [January 2, 2021, 11:49pm UTC](https://discourse.processing.org/t/main-canvas-and-creategraphics-off-screen-canvas-not-matching/26706 "2021-01-02T23:49:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hansi95](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@hansi95](https://discourse.processing.org/u/hansi95)\
**Post date:** [January 2, 2021, 11:49pm UTC](https://discourse.processing.org/t/main-canvas-and-creategraphics-off-screen-canvas-not-matching/26706/1 "2021-01-02T23:49:29Z")

</div>

Hey everyone! Here’s the image I’m talking about ([https://imgur.com/ZzCpEca](https://imgur.com/ZzCpEca)) You can see the particles on my exported canvas are not in the same place as the main canvas. Seems like they start in different positions or something. I think I need to add an update/reset so they look the same but not quite sure how. Here’s my code: ([https://editor.p5js.org/hansi95/sketches/sEJ6wm7oY?fbclid=IwAR1TTpAEtA\_G9z5cStr5NnkCdxEbg2m09kfQwq-Wn0hvp66W3JQbU4hQM5Q](https://editor.p5js.org/hansi95/sketches/sEJ6wm7oY?fbclid=IwAR1TTpAEtA_G9z5cStr5NnkCdxEbg2m09kfQwq-Wn0hvp66W3JQbU4hQM5Q)).

 ![ZzCpEca](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b0ac542dbcf414a1131d5507a47aa7b6b6d0f87c.jpeg) Any help would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)\
**Post date:** [January 3, 2021, 1:48am UTC](https://discourse.processing.org/t/main-canvas-and-creategraphics-off-screen-canvas-not-matching/26706/2 "2021-01-03T01:48:27Z")

</div>

It looks like what you’re drawing to the on-screen canvas and off-screen are two different images? How about drawing only to the off-screen canvas and use the main screen canvas to simply display it?

Here is a simple example. I have to call `noLoop()` in `draw()`, otherwise, the last frame doesn’t get captured in the image file.

```auto
let img

let saveImg = false

function setup() {
  createCanvas(400, 400);
  frameRate(2)

  img = createGraphics(400, 400)
}

function draw() {
  background(220);

  drawToBuffer(img)
  image(img, 0, 0) // simply display the buffer

  if (saveImg) {
    noLoop()
    img.save('test.png')
    saveImg = false
  }
}

function drawToBuffer(pg) {
  pg.fill(255, 0, 0)
  pg.ellipse(random(width), random(height), 50, 50)
}

function keyPressed() {
  if (key === 's') {
    saveImg = true
  }
}

```

---

<div class="post-metadata">

**Author:** ![hansi95](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@hansi95](https://discourse.processing.org/u/hansi95)\
**Post date:** [January 3, 2021, 5:31am UTC](https://discourse.processing.org/t/main-canvas-and-creategraphics-off-screen-canvas-not-matching/26706/3 "2021-01-03T05:31:22Z")

</div>

Hmm either way I just need the final output to be exported as the offscreen canvas. This code seems a little simpler than mine lol

---

<div class="post-metadata">

**Author:** ![rbrauer](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rbrauer](https://discourse.processing.org/u/rbrauer)\
**Post date:** [January 4, 2021, 12:55am UTC](https://discourse.processing.org/t/main-canvas-and-creategraphics-off-screen-canvas-not-matching/26706/4 "2021-01-04T00:55:55Z")

</div>

Try multiplying the positions in the drawing commands to scale them. Also, I would recommend drawing to both canvases every frame unless you have a reason you can’t.

```javascript
var pause;
var main, img;
var particles;
var inc, zz;

function setup() {
  frameRate(60);
  main = createCanvas(360, 640);
  img = createGraphics(3600, 6400);
  background(0);
  img.background(0);
  
  pause = false;
  inc = 0.003;
  zz = 0;

  particles = [];
  for(a=0; a<5; a++) {
    particles.push(new Particle(
      random(width), random(height)));
  }
}

function keyReleased() {
  if(key == 's') {
    pause = true;
    window.open(img.canvas.toDataURL());
  } else if(key == 'p') {
    pause = !pause;
  }
}

function draw() {
  if(pause) {
    return;
  }
  zz += 0.01;
  for(a=0; a<particles.length; a++) {
    particles[a].tick();
    particles[a].disp(main, 1);
    particles[a].disp(img, img.width / width);
  }
}

function Particle(xx, yy) {
  this.pos = createVector(xx, yy);
  this.vel = createVector(0, 0);
  
  this.wrap = function() {
    if(this.pos.x > width) {
      this.pos.x -= width;
    }
    if(this.pos.x < 0) {
      this.pos.x += width;
    }
    if(this.pos.y > height) {
      this.pos.y -= height;
    }
    if(this.pos.y < 0) {
      this.pos.y += height;
    }    
  }
  
  this.tick = function() {
    this.vel = p5.Vector.fromAngle(
      noise(inc * this.pos.x, inc * this.pos.y, zz) * TWO_PI
    );
    this.pos.add(this.vel);
    this.wrap();
    this.vel.mult(0.7);
  }
  
  this.disp = function(ctx, scl) {
    ctx.stroke(255);
    ctx.strokeWeight(1 * scl);

    var spos = this.pos.copy();
    spos.mult(scl);
    var svel = this.vel.copy();
    svel.mult(scl);
    ctx.line(
      spos.x, spos.y, 
      spos.x + svel.x, spos.y + svel.y);
  }
}

```