Resize image and remove borders

Question

I’m doing an "UI" with Canvas, where only the central part is resized and then re-folded with the edges. Everything works perfectly, but as the size increases the "Smooth" of the edges too, and I wanted to know how to remove it.

Base image:

Final result:

Section where the image is resized and forwarded:

left, top, bottom, right = 32;
width, height = 96;
h = 700;
w = 100;
con.drawImage(bg, 0, 0, left, top, 0, 0, left, top);
con.drawImage(bg, left, 0, width - left - right, top, left, 0, w - left - right, top);
con.drawImage(bg, width - right, 0, right, top, w - right, 0, right, top);
con.drawImage(bg, 0, top, left, height - top - bottom, 0, top, left, h - top - bottom);
con.drawImage(bg, left, top, width - left - right, height - top - bottom, left, top, w - left - right, h - top - bottom);
con.drawImage(bg, width - right, top, right, height - top - bottom, w - right, top, right, h - top - bottom);
con.drawImage(bg, 0, height - bottom, left, bottom, 0, h - bottom, left, bottom);
con.drawImage(bg, left, height - bottom, width - left - right, bottom, left, h - bottom, w - left - right, bottom);
con.drawImage(bg, width - right, height - bottom, right, bottom, w - right, h - bottom, right, bottom);

I found how to solve, you have to put the code below the image upload:

con.imageSmoothingEnabled = false;
con.mozImageSmoothingEnabled = false;
con.msImageSmoothingEnabled = false;
con.webkitImageSmoothingEnabled = false;