Paint() - ing over and over without losing the background

Example: I have a timer that recalculates the x/y coordinates of a line and calls repaint();
Now, everytime paint() is executed, the complete component is redrawn and the line moves thus creating an animation. What I want is keep a copy of the old frame still visible, so each call to paint() should add a new line to the graphic context without erasing the background.

I know two ways of doing this:

  1. add lines to an Image object then draw the image in paint()
  2. add all lines to an array and redraw all lines each time paint() is called

In both cases, the redrawing becomes slow if the component is big, if the number of elements to add to the image increases, and if the whole component is transformed.

The image approach is probably the most desirable since it won’t be soaking up memory like constantly increasing a dynamic array of lines.

You might be able to improve the performance by splitting your Component into several smaller components and only drawing the line to the relevant component(s). I’m thinking something like a Quadtree.

That way as you add lines you only need to redraw a smaller section of the UI as all the other areas will be cached.