# Paintable Canvas Basics

**URL:** <https://forum.inductiveautomation.com/t/paintable-canvas-basics/7743>\
**Category:** General Discussion\
**Created:** [December 21, 2013, 4:20pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-basics/7743 "2013-12-21T16:20:34Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![roman.pierantozzi](https://avatars.discourse-cdn.com/v4/letter/r/a87d85/32.png) [@roman.pierantozzi](https://forum.inductiveautomation.com/u/roman.pierantozzi)\
**Post date:** [December 21, 2013, 4:20pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-basics/7743/1 "2013-12-21T16:20:34Z")

</div>

This is a copy/paste from the provided paintable canvas. I commented out most of it just trying to get a color to change based on a tag status. I must be missing something simple. Your help is much appreciated.

from java.awt import Color  
from java.awt import GradientPaint  
from java.awt.geom import GeneralPath  
from java.awt.geom import Rectangle2D  
from java.awt.geom import Ellipse2D

g = event.graphics

#### Create shapes assuming 100x100 size, then scale the graphics

#### to proper size later

# Pump Output

##nozzle = Rectangle2D.Float(92, 0, 8, 28)  
##pipe = Rectangle2D.Float(50, 4, 45 , 20)

# Body

outerBody = Ellipse2D.Float(4,4,8,80)  
innerBody = Ellipse2D.Float(8,8,72,72)

# Feet

##feet = GeneralPath()  
##feet.moveTo(2,98)  
##feet.lineTo(28,50)  
##feet.lineTo(58,50)  
##feet.lineTo(82,98)  
##feet.lineTo(62,98)  
##feet.lineTo(50,60)  
##feet.lineTo(36,60)  
##feet.lineTo(22,98)  
##feet.closePath()  
##foot1 = Rectangle2D.Float(0,92,28,8)  
##foot2 = Rectangle2D.Float(56,92,28,8)

#Status  
##status = Ellipse2D.Float(20,30,7,7)

# Tip - make the bounds of these rectangles dynamic for real status

##amps = Rectangle2D.Float(25,53,5,15)  
##hz = Rectangle2D.Float(30,45,5,23)

#### Scale graphics to actual component size

dX = (event.width-1)/100.0  
dY = (event.height-1)/100.0  
g.scale(dX,dY)

#### Paint Shapes

# Paint Feet

##g.setColor(Color.GRAY)  
##g.fill(feet)  
##g.setColor(Color.DARK\_GRAY)  
##g.draw(feet)  
##g.fill(foot1)  
##g.fill(foot2)

# Paint output pipe and nozzle

##g.setPaint(GradientPaint(0,12,Color.WHITE, 0,30, Color.DARK\_GRAY,1))  
##g.fill(pipe)  
##g.setColor(Color.DARK\_GRAY)  
##g.draw(pipe)  
##g.setPaint(GradientPaint(0,8,Color.WHITE, 0,28, Color.DARK\_GRAY,1))  
##g.fill(nozzle)  
##g.setColor(Color.DARK\_GRAY)  
##g.draw(nozzle)

# Paint body

g.setPaint(GradientPaint(40,40,Color.WHITE, 0,0, Color.DARK\_GRAY,1))  
g.fill(outerBody)  
g.setColor(Color.DARK\_GRAY)  
g.draw(outerBody)  
g.setPaint(GradientPaint(0,40,Color.WHITE, 0,100, Color.DARK\_GRAY,1))  
g.fill(innerBody)  
if “motor 2” == 1:  
g.setColor(Color.GREEN)  
else:  
g.setColor(Color.DARK\_GRAY)  
g.draw(innerBody)

# Paint status indications - These would draw from dynamic

# properties in a real implementation

##g.setColor(Color.GREEN)  
##g.fill(status)  
##g.setColor(Color.GREEN.darker())  
##g.draw(status)  
##g.drawString(“AUTO”,30,38)

##g.setFont(g.font.deriveFont(g.font.size-2.0))  
##g.setColor(Color.BLUE)  
##g.fill(amps)  
##g.drawString(“Amps”, 42,55)  
##g.setColor(Color.MAGENTA)  
##g.fill(hz)  
##g.drawString(“Hz”, 42,65)

---

<div class="post-metadata">

**Author:** ![adamaustin](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@adamaustin](https://forum.inductiveautomation.com/u/adamaustin)\
**Post date:** [December 23, 2013, 4:43pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-basics/7743/2 "2013-12-23T16:43:01Z")

</div>

It looks like you have to explicitly tell the canvas to repaint itself.

Create a custom boolean property on your canvas called changeColor:  
 ![](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/0/00060266eb2328216f2ea91419aeeecaf24753c9.jpeg)

Add a binding for the custom property to point to a tag that changes:  
 ![](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/5/0568935aeeafd04c6884735c54de924760a773d7.jpeg)

Change the if statement in your code:

```auto
[...snip...]
if event.source.changeColor:
	g.setColor(Color.GREEN)
else:
	g.setColor(Color.DARK_GRAY)
[...snip...]
```

And add the following to the propertyChange event of the canvas:

```auto
if event.propertyName == "changeColor":
	event.source.repaint()
```