Question

I have a simple application that allows the user to draw in the canvas control.

Now, what I want is converting that canvas into an image. So here’s my code.

public void paint(Graphics g)
{
    //super.paint(g);
    Graphics2D draw = (Graphics2D) g;
    if(this.is_beginning || this.to_save)
    {
        draw.setColor(Color.white);
        draw.fillRect(0, 0, this.getWidth(), this.getHeight());
        this.is_beginning= false;
    }
    if(this.m_alzada)
    {
        draw.setColor(Color.red);
        draw.drawLine(uX, uY, x, y);

    }
}

And this is my method for save the image.

private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) {                                         
    int w = canvas1.getWidth();
    int h = canvas1.getHeight();
    int type = BufferedImage.TYPE_INT_BGR;
    BufferedImage image = new BufferedImage(w,h,type);
    Graphics2D g2 = image.createGraphics(); 
    canvas1.to_save = true;
    canvas1.paint(g2);
    try {
        ImageIO.write(image, "png", new File("C:/Users/Uriel/Desktop/ejemplo.png"));
    } catch (IOException ex) {
        Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
    }

}

All these result in a blank image, I know how the paint method works, and I realize that is in there where my problem is. But how can I do to drew everything the user have already drew in the paint method?

Excuse me for my bad english, I’m from Mexico. Thanks by the way.

I would like to knoe if there is anyway to make something like when you work with the Canvas og HTML5 and you get a matrix with the RGB info of each pixel in the canvas. Is it possible to do that with the canvas component in JAVA?

Answer 1

Apart from making sure the the component is sized properly, use JComponent#print and JComponent#printAll methods instead.

These will disable double buffering and over come some other native peer issues when it expects to be printing to the screen

UPDATED

From the example app…

I was able to produce this dump

Using this code

Container pane = frame.getContentPane();
BufferedImage img = new BufferedImage(pane.getWidth(), pane.getHeight(), BufferedImage.TYPE_INT_RGB);
Graphics2D g2d = img.createGraphics();
pane.printAll(g2d);
g2d.dispose();
try {
    ImageIO.write(img, "png", new File("save.png"));
} catch (IOException ex) {
    ex.printStackTrace();
}

UPDATED

I don’t think you paint is the source of your problem. It’s not as clean as it could though.

To start with, your “drawing” surface is extending from java.awt.Canvas, and you’re adding it to a JFrame, mixing heavy and light weight components is never a good idea.

public class Dibujo extends Canvas ...

You’re better of using something like a JPanel

public class Dibujo extends JPanel ...

NEVER DO THIS

public void paint(Graphics g) {
    //super.paint(g);

You MUST call super.paint there is more going on in the back then simply filling the component. Once you start using something like JPanel, you’ll want to override paintComponent instead.

You only ever draw the last line segment in you paint method…

if (this.m_alzada) {
    draw.setColor(Color.
    draw.drawLine(uX, uY, x, y);
}

This means when you try and save the component, you will only ever see the last segment. The paint method should be painting ALL the lines segments each time it’s called.

In your mouseDragged method, you are doing this…

this.paint(this.getGraphics());

DON’T. You are not responsible for updating the graphics, that repaint manager is. All this does is basically doing is painting on to a scratch pad graphics context, as soon as the next repaint request is processed, it will all be wiped clean.

I think you need to have a read through Performing Custom Painting to understand some of the basic concepts. I would also read through Painting in AWT and Swing to understand how painting works in Java.

After modifying your code, I was able to get this…

To save like this…

package prueba_uno_graphics;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.Shape;
import java.awt.event.*;
import java.awt.geom.Path2D;
import java.util.ArrayList;
import java.util.List;
import javax.swing.JPanel;

/**
 *
 * @author Uriel
 */
// Don't mix heavy and light weight components
public class Dibujo extends JPanel implements ActionListener, MouseListener, MouseMotionListener {

//    ArrayList lineas = new ArrayList();
//    boolean m_alzada = true, is_beginning = true, to_save = false;
//    int uX, uY, x, y;

    private Path2D shape;

    Dibujo() {
        setBackground(Color.WHITE);
        shape = new Path2D.Float();
    }

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D draw = (Graphics2D) g;
//        if (this.is_beginning || this.to_save) {
//            draw.setColor(Color.white);
//            draw.fillRect(0, 0, this.getWidth(), this.getHeight());
//            this.is_beginning = false;
//        }
//        if (this.m_alzada) {
//            draw.setColor(Color.red);
//            draw.drawLine(uX, uY, x, y);
//
//        }

        draw.setColor(Color.RED);
        draw.draw(shape);

    }

//    @Override
//    public void paint(Graphics g) {
//        // ALWAYS call super.paint
//        super.paint(g);
//        Graphics2D draw = (Graphics2D) g;
//        if (this.is_beginning || this.to_save) {
//            draw.setColor(Color.white);
//            draw.fillRect(0, 0, this.getWidth(), this.getHeight());
//            this.is_beginning = false;
//        }
//        if (this.m_alzada) {
//            draw.setColor(Color.red);
//            draw.drawLine(uX, uY, x, y);
//
//        }
//    }

    @Override
    public void actionPerformed(ActionEvent e) {
    }

    @Override
    public void mouseClicked(MouseEvent e) {
    }

    @Override
    public void mousePressed(MouseEvent e) {
        //        this.uX = e.getX();
        //        this.uY = e.getY();
        Point point = e.getPoint();
        shape.moveTo(point.x, point.y);

    }

    @Override
    public void mouseReleased(MouseEvent e) {
    }

    @Override
    public void mouseEntered(MouseEvent e) {
    }

    @Override
    public void mouseExited(MouseEvent e) {
    }

    @Override
    public void mouseDragged(MouseEvent e) {
        //        this.x = e.getX();
        //        this.y = e.getY();
        // Don't do this!
        //        this.paint(this.getGraphics());
        //        ArrayList ayuda = new ArrayList();
        //        ayuda.add(uX);
        //        ayuda.add(uY);
        //        ayuda.add(x);
        //        ayuda.add(y);
        //        this.lineas.add(ayuda);
        //        uX = x;
        //        uY = y;
        Point point = e.getPoint();
        shape.lineTo(point.x, point.y);
        repaint();

    }

    @Override
    public void mouseMoved(MouseEvent e) {
    }

}