I'm doing a "UI" with Canvas, where only the center part is resized and then reattached with the edges. Everything works perfectly, however as the size increases the "smooth" edges too, and I wanted to know how to remove it.
Base image:
Finalresult:
Excerpt where the image is resized and reloaded:
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 it, you have to put the code below image load:
con.imageSmoothingEnabled = false;
con.mozImageSmoothingEnabled = false;
con.msImageSmoothingEnabled = false;
con.webkitImageSmoothingEnabled = false;