JScrollPane+Canvas: rendering issue

Question

I'm working on a Java version of MS Paint. You can see what it looks like so far here. (images are far too tall and many to embed in a question)

It uses a JScrollPane to move a subclass of Canvas around. If you don't resize the Window, it operates just fine. If you make the window smaller, at first glance it appears to work just the same.

However, if you scroll around, it becomes apparent that the application is rendering the same "viewport", just moved. If you keep scrolling, it becomes more obvious that it overlaps everything else.

So basically, it's rendering the wrong viewport. Resizing the window updates the viewport to be correct. If you try to draw on a grey area, it draws it just fine, you just can't see it.

I've tried doing repaint() on the canvas any time the scrollbars are moved. It didn't change anything.

What should I do to fix this?

This is the code for the frame: (argument img is the image it will paint on. You have to do setVisible(true) yourself as well)

import java.awt.*;
import java.awt.event.AdjustmentEvent;
import java.awt.event.AdjustmentListener;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.image.BufferedImage;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JSlider;


public class JPaint extends JFrame {
    JPaintPanel panel;
    public JPaint(BufferedImage img) {
        super("Edit your image");
        panel = new JPaintPanel(img);
        setContentPane(panel);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        //Trial and error got me these numbers.
        //I have no idea how find the proper size...
        setSize(img.getWidth()+20-1, img.getHeight()+50+50+2);
    }
    //go to the panel you hold, ask it to retrieve it from the canvas
    public BufferedImage grabImage() {
        return panel.grabImage();
    }
}


class JPaintPanel extends JPanel {
    JTools toolbar;
    JCanvas canvas;
    JScrollPane scrollPane;
    public JPaintPanel(BufferedImage img) {
        super(new BorderLayout());
        toolbar = new JTools();
        canvas = new JCanvas(img);
        JScrollPane scrollPane = new JScrollPane(canvas);
        scrollPane.getHorizontalScrollBar().addAdjustmentListener(new AdjustmentListener() {
            @Override
            public void adjustmentValueChanged(AdjustmentEvent e) {
                canvas.repaint();
            }

        });
        scrollPane.getVerticalScrollBar().addAdjustmentListener(new AdjustmentListener() {
            @Override
            public void adjustmentValueChanged(AdjustmentEvent e) {
                canvas.repaint();
            }

        });
        setPreferredSize(new Dimension(img.getWidth(),img.getHeight()+50));
        add(toolbar, BorderLayout.PAGE_START);
        add(scrollPane, BorderLayout.CENTER);
    }
    public BufferedImage grabImage() {
        return canvas.getImage();
    }
}
class JTools extends JPanel {
    JSlider scale;

    public JTools() {
        scale= new JSlider(JSlider.HORIZONTAL,
                                    0, 400, 100);
        scale.setMajorTickSpacing(100);
        scale.setPaintTicks(true);
        scale.setPaintLabels(true);
        scale.setPreferredSize(new Dimension(300,50));
        add(scale);
    }

}
class JCanvas extends Canvas {

    BufferedImage im;
    Graphics2D g2d;
    Point old = new Point();
    Point now = new Point();

    public JCanvas(BufferedImage imIn) {
        im = imIn;
        g2d = im.createGraphics();


        setPreferredSize(new Dimension(im.getWidth(), im.getHeight()));


        setColor(Color.WHITE);
        setWidth(4);
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        //g2d.drawRect(5, 5, 40, 20);

        addMouseListener(new MouseAdapter() {
            public void mousePressed(MouseEvent e) {
                //System.out.println(e.getPoint());
                //g2d.fillRect(e.getX()-5, e.getY()-5, 10, 10);
                old=e.getPoint();
                now=e.getPoint();
                g2d.drawLine(e.getX(), e.getY(), e.getX(), e.getY());
                repaint();
            }
        });
        addMouseListener(new MouseAdapter() {
            public void mouseReleased(MouseEvent e) {
                //System.out.println(e.getPoint());
                old=e.getPoint();
                now=e.getPoint();
                g2d.drawLine(e.getX(), e.getY(), e.getX(), e.getY());
                repaint();
            }
        });
        addMouseMotionListener(new MouseAdapter() {
            public void mouseDragged(MouseEvent e) {
                //System.out.println(e.getPoint());
                //g2d.fillRect(e.getX()-5, e.getY()-5, 10, 10);
                old=now;
                now=e.getPoint();
                g2d.drawLine((int)old.getX(), (int)old.getY(), (int)now.getX(), (int)now.getY());
                repaint();
            }
        });
    }
    public void paint(Graphics g) {
        //super.paint(g);
        update(g);
    }
    public void update(Graphics g) {
        //super.update(g);
        g.drawImage(im, 0, 0, null);
        getToolkit().sync();
    }
    public void setWidth(float w) {
        g2d.setStroke(new BasicStroke(w, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
    }
    public void setColor(Color c) {
        g2d.setColor(c);
    }
    public BufferedImage getImage() {
        return im;
    }
}

Answer 1

class JCanvas extends Canvas { 

Don't mix Swing with AWT components without good cause. Extend a JComponent instead.