Drawing BufferedImage vs. Graphics2D

Question

Hello everyone,
I've got an app that does the following:
- Reads image data from an input file (24 bit integers)
- Stores the data in a buffered image (literally calls setRGB(...) for each pixel)
- Displays the buffered image on a canvas (JPanel):
getGraphics().drawImage(image, 0, 0, WIDTH, HEIGHT, Color.WHITE, this);
fyi, here is my paintComponent() method:
    public void paintComponent(Graphics g) {
        Graphics2D g2d = (Graphics2D)g;
        g2d.drawImage(image, 0, 0, this);
    }Now that the image is displayed, I want to allow the user to draw (edit) the image and then save the changes to an output file. The drawing occurs in my canvas draw() method. I have a MouseListener and MouseMotionListener that detect mouse events on the canvas. The brushSize and currentColor are already set before draw(...) is called. Here is my draw method:
    protected void draw(Point start) {
        Graphics2D g2d = (Graphics2D)getGraphics();
        g2d.setColor(currentColor);
        int x = start.x - (brushSize/2) + 1;
        int y = start.y - (brushSize/2) + 1;
        g2d.fillOval(x, y, brushSize, brushSize);//maybe I should directly edit my image and call repaint() instead of doing this?
     }Visually, this seems to work. Drawing is displayed on the canvas as expected when the user drags the mouse around. But when I attempt to save the image to a file, I can see that the image is unchanged. Looking at the code, I think that what I need to do is change my draw method so that I actually edit the image (i.e. make changes to my image and then call repaint(), instead of using g2d.fillOval(...)). But I have no idea how to do this!
I want to try:
image.setRGB(startx, starty, width, height, rgbArray, offset, scansize);
but I have no idea what these values should be: rgbArray, offset, scansize
PLEASE advise.....

Answer 1

Hi Markt,
thank you, that helped.
The first line (using the graphics of the image) did allow me to draw to the image which is what I needed.
But when I called the second line:
repaint(0,0,image.getWidth(null),image.getHeight(null));
my whole canvas just went white.
I tried this instead:
getGraphics().drawImage(currentImage, 0, 0, (int)width, (int)height, this);
and it seems to work. So now my drawing problem (as far as drawing to the image) is solved. This has uncovered a new problem...hopefully someone here can help me with this one too.
My app also allows the user to zoom in and zoom out on the image. The zooming functionality (visually) is working. You can zoom in or zoom out as many times as you want - and the image displays properly (and is scrollable). BUT, when zoomed in, the moment you start to draw on the canvas with the mouse, the image reverts back to it's original size (scale of 1). I am pretty sure that this scaling is happening before my draw (the draw does not end up being in the same place as the mouse click).
I put a breakpoint inside my paintComponent(g) method - this method is not being called when the user draws (i.e. clicks the mouse inside the canvas)
I'm posting my code here. I guess I'm either doing something wrong - or forgetting to do something that I SHOULD do. If someone can tell me why my image jumps back to a scale of 1 when the mouse is clicked, I'd really appreciate it!
CanvasDrawingListener.java (implements MouseListener, MouseMotionListener)
        public void mousePressed(MouseEvent e)
            lastPoint = e.getPoint();
            canvas.draw(lastPoint);
* Represents a canvas that displays the image contained in a buffer of 24-bit
* RGB values.  The canvas is initially displayed on a scale of 1.  The scale
* is increased by a factor of zoomFactor each time the image is zoomed in.
* Likewise, the scale is decreased by a factor of zoomFactor each time the image
* is zoomed out.
* Each time the image is zoomed in, the new scale value is placed inside scaleValuesVec.
* This allows the application to keep track of previous scale values so that
* the user can "back out" of the zoomed image.  In other words, if the user
* clicks "zoom in" five times, scaleValuesVec will contain values: 2,3,4,5,6.
* If the user then clicks "zoom out", the n-2 value (in this example, 5)
* is retrieved from the scaleValuesVec and used to scale the image.
public class Canvas extends JPanel{
    //initialize x to -1 so first increment sets it to 0 - drawing starts at x==0
    //y does not get incremented the first time
    BufferedImage origImage = null, currentImage = null;
    private int x = -1, y = 0;
    private boolean imageDisplayed = false;//this flag lets us know when to enable zoom buttons
    private Vector<Double> scaleValuesVec = new Vector<Double>();
    private final double zoomFactor = 1.0; //how much to increase or decrease the scale each time zoom button clicked
    private double scale; //the current scale of the bufferedImage
    private double WIDTH, HEIGHT;
    private int brushSize;
    private Color currentColor = Color.WHITE; //TODO set this same as initial button color
    /** Creates a new instance of Canvas */
    public Canvas() {
        scaleValuesVec.addElement(Double.valueOf(1.0)); //initial zoomFactor
        this.setPreferredSize(new Dimension(298, 310));
        this.setVisible(true);
    public void addListeners(){
        CanvasPropertyChangeListener cpcListener = new CanvasPropertyChangeListener();
        CanvasDrawingListener cdListener = new CanvasDrawingListener();
     * Sets the original size of the image.
    public void setInitialSize(Dimension d){
        WIDTH = d.getWidth();
        HEIGHT = d.getHeight();
        this.setPreferredSize(d);
    public BufferedImage getBufferImage(){
        return currentImage;
     * Reads a 24bit RGB value from buffer24 and registers a pixel of that
     * color to the buffered image that is displayed on the canvas.
     * This is the initial display of the image - only called once, when the
     * input file is opened.
    public void displayBufferedImage(int[] buffer24){
        origImage = new BufferedImage((int)WIDTH, (int)HEIGHT, BufferedImage.TYPE_INT_RGB);
        currentImage = new BufferedImage((int)WIDTH, (int)HEIGHT, BufferedImage.TYPE_INT_RGB);
        //read RGB data into origImage
        for(int i = 0; i < buffer24.length; i++){
            increment();
            origImage.setRGB(x, y, buffer24);
//copy origImage to currentImage (currentImage is the working image)
currentImage.setData(origImage.getData());
this.getGraphics().drawImage(currentImage, 0, 0, (int)WIDTH, (int)HEIGHT, Color.RED, this);
this.setImageDisplayed(true);
* Increments the x and y coordinate so that the next drawn pixel
* will be drawn at the next coordinate. For example, assume the dimension
* of this canvas is 298x310. Pixels will begin drawing in the upper
* left coordinate (0,0), left to right, and increment until the last pixel
* is drawn at (297,309). If the last coordinate drawn was 150,150;
* then this method will increment the coordinate to be 151,150
public void increment(){
if(x == getWidth() && y == getHeight()){
Session.getInstance().getErrorHandler().displayError(ErrorMessage.DRAW_OPERATION_ERROR);
if(x == getWidth() -1){ //reset when x == 255
x = 0;
y++;
}else if(x < getWidth() - 1){
x++; //first increment of x will set x == 0
* Adjusts canvas size to encompass entire scaled image.
public void adjustCanvasSize(double scale){
double newWidth = scale * WIDTH;
double newHeight = scale * HEIGHT;
this.setSize((int)newWidth, (int)newHeight);
this.setPreferredSize(new Dimension((int)newWidth, (int)newHeight));
//repaint();
public void zoomIn(){
scale = ((Double)scaleValuesVec.get(scaleValuesVec.size()-1)) + zoomFactor;
scaleValuesVec.addElement(scale);
adjustCanvasSize(scale);
public void zoomOut(){
if(scaleValuesVec.size() > 1){
scale = getLastScaleValue() - 1;
}else{
System.out.println("Already zoomed out to max!");
adjustCanvasSize(scale);
* Called when frame comes up, anytime repaint() called
* Called when zooming in
* Note: this method is NOT called from draw(Point p)
public void paintComponent(Graphics g) {
Graphics2D g2d = (Graphics2D)g;
g2d.scale(scale, scale);
g2d.drawImage(currentImage, 0, 0, this);
protected void draw(Point start) {
Graphics2D g2d = (Graphics2D)currentImage.createGraphics();
g2d.setColor(currentColor);
int x = start.x - (brushSize/2) + 1;
int y = start.y - (brushSize/2) + 1;
g2d.fillOval(x, y, brushSize, brushSize);
double width = currentImage.getWidth();
double height = currentImage.getHeight();
getGraphics().drawImage(currentImage, 0, 0, (int)width, (int)height, this);
* Removes most recent scale value from the vec and returns it.
public double getLastScaleValue(){
double scale = (Double)scaleValuesVec.elementAt(scaleValuesVec.size()-1);
scaleValuesVec.removeElementAt(scaleValuesVec.size()-1);
return scale;
public boolean isImageDisplayed() {
return imageDisplayed;
* fires a change event so the zoom buttons become enabled
public void setImageDisplayed(boolean imageDisplayed) {
if(imageDisplayed != this.imageDisplayed){
this.imageDisplayed = imageDisplayed;
firePropertyChange("imageDisplayed", !imageDisplayed, imageDisplayed);
public void setBrushSize(int size){
System.out.println("CANVAS BRUSH SIZE IS " + size);
this.brushSize = size;
public void setCurrentColor(Color color){
currentColor = color;
* Compare each pixel in the origImage to the currentImage.
* If pixels have same RGB, write a 0 to outputBuff.
* If they are different, write a 1 to outputBuff.
public byte[] getData(){
//first, scale the currentImage back to 1
adjustCanvasSize(1);
//make sure currentImage is same size as origImage
if(origImage.getWidth()==currentImage.getWidth() && origImage.getHeight() == currentImage.getHeight()){
int width = currentImage.getWidth();
int height = currentImage.getHeight();
byte[] outputBuff = new byte[width*height];
x = -1; y = 0; //reset x and y to beginning of image
for(int i = 0; i < outputBuff.length; i++){
increment();
if(currentImage.getRGB(x,y) == origImage.getRGB(x,y)){
outputBuff[i] = 48; //'0'
}else {
outputBuff[i] = 49;//'1'
return outputBuff;
}else {
return null;
//iterate thru both images and see if all RGB values are the same
public boolean imagesEqual(BufferedImage image1, BufferedImage image2){
if(image1.getWidth()==image2.getWidth() && image1.getHeight() == image2.getHeight()){
int width = image1.getWidth();
int height = image1.getHeight();
int numBytes = width * height;
x = -1; y = 0; //reset x and y to beginning of image
for(int i = 0; i < numBytes; i++){
increment();
if(image1.getRGB(x,y) != image2.getRGB(x,y)){
return false;
}else{
return false;
return true;