Canvas

JPanel can be used to create a canvas that graphics can be drawn on. If we do not use a canvas (and instead draw directly onto a container's surface) the drawing might be overwritten by other components (as the other components are placed on the contaniner's surface by the layout manager).

A canvas is created by extending the JPanel class and overriding its paint() method.

Canvas Example: (Run Applet)

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class CanvasDemo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel implements ActionListener
    {
        private ScribbleCanvas scribbleCanvas = new ScribbleCanvas();
        private JPanel panel = new JPanel();
        private JButton redButton = new JButton("Draw in Red"),
                blueButton = new JButton("Draw in Blue");

        public View()
        {
            super();
            this.panel.setLayout(new GridLayout(2, 1));
            this.panel.add(this.redButton);
            this.panel.add(this.blueButton);

            setLayout(new GridLayout(1, 2));
            add(this.panel);
            add(this.scribbleCanvas);

            this.redButton.addActionListener(this);
            this.blueButton.addActionListener(this);
        }

        @Override
        public void actionPerformed(ActionEvent e)
        {
            Object source = e.getSource();
            if (source == this.redButton)
            {
                this.scribbleCanvas.setDrawColour(Color.red);
            }
            else if (source == this.blueButton)
            {
                this.scribbleCanvas.setDrawColour(Color.blue);
            }
        }
    }

    public class ScribbleCanvas extends JPanel implements MouseListener, MouseMotionListener
    {
        private Image canvas = null;
        private Color colourToDraw = Color.green;
        private int oldX = 0;
        private int oldY = 0;
        private int x = 0;
        private int y = 0;

        public ScribbleCanvas()
        {
            this.addMouseListener(this);
            this.addMouseMotionListener(this);
        }

        @Override
        public void paintComponent(Graphics g)
        {
            Graphics canvasG;

            // force the background colour to be drawn once
            if (this.canvas == null)
            {
                this.canvas = createImage(getWidth(), getHeight());
                canvasG = this.canvas.getGraphics();

                canvasG.setColor(Color.yellow);
                canvasG.fillRect(0, 0, getWidth(), getHeight());
            }
            else // draw a line
            {
                canvasG = this.canvas.getGraphics();
                canvasG.setColor(this.colourToDraw);
                canvasG.drawLine(this.oldX, this.oldY, this.x, this.y);
            }

            // draw the canvas onto the panel
            g.drawImage(this.canvas, 0, 0, this);

            this.oldX = this.x;
            this.oldY = this.y;
        }

        public void setDrawColour(Color colourToDraw)
        {
            this.colourToDraw = colourToDraw;
        }

        @Override
        public void mouseMoved(MouseEvent e)
        {
        }

        @Override
        public void mouseDragged(MouseEvent e)
        {
            this.x = e.getX();
            this.y = e.getY();
            this.repaint();
        }

        @Override
        public void mousePressed(MouseEvent e)
        {
            this.oldX = this.x = e.getX();
            this.oldY = this.y = e.getY();
        }

        @Override
        public void mouseClicked(MouseEvent me)
        {
        }

        @Override
        public void mouseReleased(MouseEvent me)
        {
        }

        @Override
        public void mouseEntered(MouseEvent me)
        {
        }

        @Override
        public void mouseExited(MouseEvent me)
        {
        }
    }
}