title: How to add a background grid to JPanel when drawing lines?
body: <p>I am developing a drawing tool in which the user can draw a line on a <code>JPanel</code>.</p>
  
  <p>He will choose a start point then he drags this line to an end point to create the line.</p>
  
  <p>Note that the Java <code>Point</code> class is used here to define the coordinates of each point.</p>
  
  <p>Below are the simple code used in this scenario:</p>
  
  <pre><code>import java.awt.BasicStroke;
  import java.awt.Color;
  import java.awt.Dimension;
  import java.awt.EventQueue;
  import java.awt.Graphics;
  import java.awt.Graphics2D;
  import java.awt.Point;
  import java.awt.RenderingHints;
  import java.awt.event.MouseAdapter;
  import java.awt.event.MouseEvent;
  import javax.swing.JFrame;
  import javax.swing.JPanel;
  
  public class DrawLine extends JPanel {
  
      private MouseHandler mouseHandler = new MouseHandler();
      private Point p1 = new Point(0, 0);
      private Point p2 = new Point(0, 0);
      private boolean drawing;
  
      public DrawLine() {
          this.setPreferredSize(new Dimension(400, 200));
          this.addMouseListener(mouseHandler);
          this.addMouseMotionListener(mouseHandler);
      }
  
      @Override
      protected void paintComponent(Graphics g) {
          super.paintComponent(g);
          Graphics2D g2d = (Graphics2D) g;
          g2d.setColor(Color.blue);
          g2d.setRenderingHint(
              RenderingHints.KEY_ANTIALIASING,
              RenderingHints.VALUE_ANTIALIAS_ON);
          g2d.setStroke(new BasicStroke(8,
              BasicStroke.CAP_ROUND, BasicStroke.JOIN_BEVEL));
          g.drawLine(p1.x, p1.y, p2.x, p2.y);
      }
  
      private class MouseHandler extends MouseAdapter {
  
          @Override
          public void mousePressed(MouseEvent e) {
              drawing = true;
              p1 = e.getPoint();
              p2 = p1;
              repaint();
          }
  
          @Override
          public void mouseReleased(MouseEvent e) {
              drawing = false;
              p2 = e.getPoint();
              repaint();
          }
  
          @Override
          public void mouseDragged(MouseEvent e) {
              if (drawing) {
                  p2 = e.getPoint();
                  repaint();
              }
          }
      }
  
      private void display() {
          JFrame f = new JFrame("LinePanel");
          f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          f.add(this);
          f.pack();
          f.setLocationRelativeTo(null);
          f.setVisible(true);
      }
  
      public static void main(String[] args) {
          EventQueue.invokeLater(new Runnable() {
  
              @Override
              public void run() {
                  new DrawLine().display();
              }
          });
      }
  } 
  </code></pre>
  
  <p>What I want to do is to draw a grid of 20 pixels each square.</p>
  
  <p>And the user will choose the scale in cm so that every 20 pixels will be 50 cm for example.</p>
  
  <p>While the user is drawing on the panel, the grid must stay as a background so that he/she can use it to determine the dimensions of the lines in cm.</p>
  
  <p>To make it clearer, in C# I used a picturebox and assigned a background image of grid and used to draw on it as in the figure below:</p>
  
  <p><a href="https://i.stack.imgur.com/Cohzx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cohzx.png" alt="enter image description here"></a></p>