# Paintable Canvas Generated Image Quality Poor

**URL:** <https://forum.inductiveautomation.com/t/paintable-canvas-generated-image-quality-poor/74407>\
**Category:** Ignition\
**Tags:** ignition79\
**Created:** [June 1, 2023, 1:24am UTC](https://forum.inductiveautomation.com/t/paintable-canvas-generated-image-quality-poor/74407 "2023-06-01T01:24:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![miles.brim](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@miles.brim](https://forum.inductiveautomation.com/u/miles.brim)\
**Post date:** [June 1, 2023, 1:24am UTC](https://forum.inductiveautomation.com/t/paintable-canvas-generated-image-quality-poor/74407/1 "2023-06-01T01:24:47Z")

</div>

Hello,  
I have a RESTful API that returns a pixel array from MATLAB. I convert this into a java image and pass it to a paintable canvas. However, the paintable canvas output looks pixelated compared to the original image. How can I improve the image?

The API code looks like this (After the API returns the IMG pixel array of size IMGSize):

```auto
Img=[[[0, 0, 0] for i in range(IMGSize[1])] for j in range(IMGSize[0])]

n=-1
for k in range(IMGSize[2]):
	for j in range(IMGSize[1]):
		for i in range(IMGSize[0]):
			n+=1
			Img[i][j][k]=IMG[n]

image = BufferedImage(560, 420, BufferedImage.TYPE_INT_RGB);
raster = image.getData();
sm = raster.getSampleModel();
writeRaster = Raster.createWritableRaster(sm,Point(0,0))
for i in range(560):
	for j in range(420):
		for k in range(3):
			writeRaster.setSample(i, j, k, Img[j][i][k])
image.setData(writeRaster);

imageBytes=ByteArrayOutputStream()
ImageIO.write(image, "jpg", imageBytes)
imageBytes=imageBytes.toByteArray()
event.source.parent.getComponent('Figure').putClientProperty('Picture',imageBytes)

```

The paintable canvas code looks like this:

```auto
from java.io import ByteArrayInputStream
from javax.imageio import ImageIO
bytes = event.source.getClientProperty("Picture")
if bytes:
	image = ImageIO.read(ByteArrayInputStream(bytes))
	canvasW = event.width
	canvasH = event.height
	imageW = image.getWidth()
	imageH = image.getHeight()
	print(imageW,imageH)
	scaleX = (canvasW-1.0) / imageW
	scaleY = (canvasH-1.0) / imageH
#	event.graphics.drawImage(image,0,0,event.source)
	g = event.graphics
	g.scale(scaleX, scaleY)
	g.drawImage(image,0,0,event.source)

```

The original image looks like this:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/5/e508e7d460be6005f0577f34b0ddeb55b70eb161.png)  
The paintable canvas image looks like this:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/0/d08d7878ffecd06dbf410b025be4fd030fd6d8eb.png)

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [June 1, 2023, 1:26am UTC](https://forum.inductiveautomation.com/t/paintable-canvas-generated-image-quality-poor/74407/2 "2023-06-01T01:26:52Z")

</div>

Try not using JPEG. It is lossy, and the default quality is pretty low, IIRC. Or even better, just put the BufferedImage itself into the JComponent client property (instead of the bytes). Should run faster, too.

---

<div class="post-metadata">

**Author:** ![miles.brim](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@miles.brim](https://forum.inductiveautomation.com/u/miles.brim)\
**Post date:** [June 1, 2023, 3:50pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-generated-image-quality-poor/74407/3 "2023-06-01T15:50:50Z")

</div>

I tried bmp and png. I also passed the buffered image instead of bytes. But I did not see a noticeable difference, though this is good to know for future applications. I wonder if MATLAB is doing something behind the scenes to improve their image quality.

---

<div class="post-metadata">

**Author:** ![Kevin.Herron](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kevin.herron/32/7259_2.png) [@Kevin.Herron](https://forum.inductiveautomation.com/u/Kevin.Herron)\
**Post date:** [June 1, 2023, 3:52pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-generated-image-quality-poor/74407/4 "2023-06-01T15:52:50Z")

</div>

I bet they're rendering it with anti-aliasing, but whatever method you're using to get the raw pixels is not getting the final image. I think you're faithfully reproducing the pixels you've gotten from the API.

---

<div class="post-metadata">

**Author:** ![miles.brim](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@miles.brim](https://forum.inductiveautomation.com/u/miles.brim)\
**Post date:** [June 1, 2023, 4:44pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-generated-image-quality-poor/74407/5 "2023-06-01T16:44:46Z")

</div>

I tried this but saw no improvement.

```auto
import java.awt.RenderingHints as RenderingHints
...
g.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON)

```

---

<div class="post-metadata">

**Author:** ![Kevin.Herron](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kevin.herron/32/7259_2.png) [@Kevin.Herron](https://forum.inductiveautomation.com/u/Kevin.Herron)\
**Post date:** [June 1, 2023, 4:45pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-generated-image-quality-poor/74407/6 "2023-06-01T16:45:43Z")

</div>

Wouldn't expect any, you're just filling a raster image with pixel data, not using the drawing APIs.