Drawing on top of grid

Question

I am trying to make a maze game in java using swing. I have my maze as a grid layout and am trying to draw circles on top of it, but whenever I draw, the circles appear under my grid. Is there a way I can change this? This is the first time I am using swing. screenshot of my game

This is my class:

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.util.*;
import javax.swing.plaf.LayerUI;

public class Light extends LayerUI<JPanel> implements KeyListener, ActionListener{
    private javax.swing.Timer myTimer;
    private ArrayList <Area> circles;
    private Color[] colours;
    private static double x,y,d,xV,yV,originalD,originalX,originalY;

    public Light(){
        x=200;
        y=200;
        d=70;
        xV=0;
        yV=0;
        circles = new ArrayList <Area>();
        colours = new Color[20];
        for (int i=0;i<20;i++) colours[i]=new Color(240-i*12,240-i*12,240-i*12);
        addKeyListener(this);
        setFocusable(true);
        myTimer = new javax.swing.Timer(120, this ); 
        myTimer.start();
    } 

    public void keyTyped(KeyEvent e) {}

    public void keyPressed(KeyEvent e) {
        int key = e.getKeyCode();
        if (key == KeyEvent.VK_UP) yV=-20;
        else if (key == KeyEvent.VK_DOWN) yV=20;
        else if (key == KeyEvent.VK_LEFT) xV=-20;
        else if (key == KeyEvent.VK_RIGHT) xV=20;
        repaint();
    }

    public void keyReleased(KeyEvent e) {
        int key = e.getKeyCode();
        if (key == KeyEvent.VK_UP) yV=0;
        else if (key == KeyEvent.VK_DOWN) yV=0;
        else if (key == KeyEvent.VK_LEFT) xV=0;
        else if (key == KeyEvent.VK_RIGHT) xV=0;
        repaint();
    }

    public void actionPerformed(ActionEvent e) {
        if (e.getSource()==myTimer) repaint();
    }

    private AlphaComposite makeComposite(float alpha) {
        int type = AlphaComposite.SRC_OVER;
        return(AlphaComposite.getInstance(type, alpha));
    }

    private void createCricles(Graphics2D g2d, float alpha,Color c,Area circle) {
        Composite originalComposite = g2d.getComposite();
        g2d.setPaint(c);
        g2d.setComposite(makeComposite(alpha));
        g2d.fill(circle);
        g2d.setComposite(originalComposite);
    }

    private void move(){
        x+=xV;
        y+=yV;
    }

    public double getLightX(){
        return x;
    }

    public double getLightY(){
        return y;
    }

    public void drawCircles(Graphics g,JComponent c) {
        super.paint(g,c);
        Graphics2D g2d = (Graphics2D)g;
        circles.clear();
        //more code here
    }
}

These are the errors I am getting:

./Light.java:23: error: cannot find symbol
        addKeyListener(this);
        ^
  symbol:   method addKeyListener(Light)
  location: class Light
./Light.java:24: error: cannot find symbol
        setFocusable(true);
        ^
  symbol:   method setFocusable(boolean)
  location: class Light
./Light.java:37: error: cannot find symbol
        repaint();
        ^
  symbol:   method repaint()
  location: class Light
./Light.java:46: error: cannot find symbol
        repaint();
        ^
  symbol:   method repaint()
  location: class Light
./Light.java:50: error: cannot find symbol
        if (e.getSource()==myTimer) repaint();
                                    ^
  symbol:   method repaint()
  location: class Light
5 errors

Answer 1

Don't invoke paintComponent() directly. Swing will invoke paintComponent() when the components needs to be repainted.

The drawCircles(…) is a method that should be invoked in the paintComponent() method.

Maybe you can use a Layered Pane to paint the circles on top of the game panel. The Light panel would need to be non-opaque so its background won't paint over the game board.

Or maybe you can use a JLayer . Not really sure what effect you are trying to achieve.