# Image Slice Tool – Output Canvas Resolution Issue

**URL:** <https://discourse.processing.org/t/image-slice-tool-output-canvas-resolution-issue/19997>\
**Category:** Coding Questions\
**Created:** [April 21, 2020, 9:40am UTC](https://discourse.processing.org/t/image-slice-tool-output-canvas-resolution-issue/19997 "2020-04-21T09:40:53Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![matejvojtus](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@matejvojtus](https://discourse.processing.org/u/matejvojtus)\
**Post date:** [April 21, 2020, 9:40am UTC](https://discourse.processing.org/t/image-slice-tool-output-canvas-resolution-issue/19997/1 "2020-04-21T09:40:53Z")

</div>

Hi everyone,  
I am quite new to p5js world and I am trying to create an Image slicing tool.

The code gets me the wanted result – sliced input image  
but it seems that it doesn’t retain the intial resolution of the image,  
the output resolution of final saved sliced canvas is really low.

You can test the tool here [http://pritomnost.matejvojtus.com/](http://pritomnost.matejvojtus.com/)  
or see it in action here [https://www.instagram.com/p/B-cGNwWBupC/](https://www.instagram.com/p/B-cGNwWBupC/)

```auto
let input;
let pix;
let img;
let obr;
let x1, x2, y1, y2;
let w, h, m;
let a = 0;
let sr = 40;

function setup() {
  let c = createCanvas(window.innerWidth, window.innerHeight);
  textAlign(CENTER);
  textSize(16);
  text('PRITOMNOST IMAGE TOOL 1.6', width / 2, height / 2-48);
  text('DRAG AND DROP AN IMAGE', width / 2, height / 2);
  text('MOVE CURSOR AROUND TO CHANGE IMAGE PLACEMENT', width / 2, height / 2+20);
  text('PRESS AND HOLD MOUSE TO STOP', width / 2, height / 2+40);
  text('SAVE TO DESKTOP BY PRESSING S', width / 2, height / 2+60);
  c.drop(gotFile);
  
}

function gotFile(file) {
  img = createImg(file.data, created).hide();
  clear(); //clears drop image screen
}

function created() {
  graphics = createGraphics(img.width, img.height);
  graphics.image(img, 0, 0, graphics.width, graphics.height);
  let pix = graphics.get(0, 0, graphics.width, graphics.height);
  obr = pix;
  obr.loadPixels(draw);
}

function draw() {
  if (obr){
  obr.resize(0, window.innerHeight);
    //image(obr, 0, 0);
  a = a + sr;
  if (a > windowWidth) {
    a = 0;
  }
  m = m + 10;
  if (m > height / 4) {
    m = 0;
  }
  m = int(m);
  copy(obr, x1, y1, w, h, a, y2, w, h);
  x1 = m+mouseY;
  y1 = 0;
  y2 = 0;
  w = sr;
  h = height;
  }
}

function keyTyped() {
  if (key === 's') {
    noLoop();
    saveCanvas('myCanvas.jpg');
  }
}
function mousePressed() {
noLoop(); // Holding down the mouse activates looping
}
function mouseReleased() {
loop(); // Releasing the mouse stops looping draw()
}

```

I really appreciate any help! Thank you in advance.

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [April 21, 2020, 11:56pm UTC](https://discourse.processing.org/t/image-slice-tool-output-canvas-resolution-issue/19997/2 "2020-04-21T23:56:49Z")

</div>

Welcome to the forums! Neat sketch.

`saveCanvas()` is taking a “screenshot” of the canvas. If you initialized the sketch with size 1000x1000, but you pass it a 3000x4000 image, `saveCanvas()` is still going to give you back a 1000x1000 “screenshot”.

_But How do I preserve the initial resolution?_

Instead of drawing directly to the main sketch’s canvas, you could do all your changes, in full resolution, to a PGraphic, and _then_ draw it to the main. Finally, when the user presses save, call `myFullResolutionGraphic.saveCanvas()` instead of just `saveCanvas()`