Subject Code : CS4

Module Code : 18 - Graphics

Lesson Code : 18.2
Topic : Java.awt.graphics
Time Frame : 30 minutes

TARGET
By the end of this learning guide module, the students should be able to:
1. Make a simple drawing application

HOOK

In the previous lesson, the java.awt.canvas was discussed wherein this component represents a
blank rectangular area of the screen onto which the application can draw or from which the application
can trap input events from the user.

In this module we will use the java.awt.Graphics. This class is is the abstract base class for all
graphics contexts that allow an application to draw onto components that are realized on various
devices, as well as onto off-screen images.

IGNITE

java.awt.Graphics

A Graphics object encapsulates state information needed for the basic rendering operations that Java
supports. This state information includes the following properties:

 The Component object on which to draw.

 A translation origin for rendering and clipping coordinates.
 The current clip.
 The current color.
 The current font.
 The current logical pixel operation function (XOR or Paint).
 The current XOR alternation color (see setXORMode(java.awt.Color)).

Coordinates are infinitely thin and lie between the pixels of the output device. Operations that draw the
outline of a figure operate by traversing an infinitely thin path between pixels with a pixel-sized pen

Computer Science 4 | Page 1 of 6

that hangs down and to the right of the anchor point on the path. Operations that fill a figure operate by
filling the interior of that infinitely thin path. Operations that render horizontal text render the ascending
portion of character glyphs entirely above the baseline coordinate.

The graphics pen hangs down and to the right from the path it traverses. This has the following
implications:

 If you draw a figure that covers a given rectangle, that figure occupies one extra row of
pixels on the right and bottom edges as compared to filling a figure that is bounded by that
same rectangle.
 If you draw a horizontal line along the same y coordinate as the baseline of a line of text,
that line is drawn entirely below the text, except for any descenders.

All coordinates that appear as arguments to the methods of this Graphics object are considered relative
to the translation origin of this Graphics object prior to the invocation of the method.

All rendering operations modify only pixels which lie within the area bounded by the current clip, which
is specified by a Shape in user space and is controlled by the program using the Graphics object. This
user clip is transformed into device space and combined with the device clip, which is defined by the
visibility of windows and device extents. The combination of the user clip and device clip defines the
composite clip, which determines the final clipping region. The user clip cannot be modified by the
rendering system to reflect the resulting composite clip. The user clip can only be changed through the
setClip or clipRect methods. All drawing or writing is done in the current color, using the current paint
mode, and in the current font.

Methods and Description Example

1. public abstract void public class myGraphics extends Canvas{
drawString(String str, int
x, int y): is used to draw public void paint(Graphics mycolor) {
mycolor.drawString("Hello",40,40);
the specified string.
}
2. public void drawRect(int public class myGraphics extends Canvas{
x, int y, int width, int
height): draws a rectangle public void paint(Graphics mycolor) {
with the specified width setBackground(Color.WHITE);
mycolor.drawRect(130, 30,100, 80);
and height. }
3. public abstract void public class myGraphics extends Canvas{
fillRect(int x, int y, int
width, int height): is public void paint(Graphics mycolor) {
used to fill rectangle setBackground(Color.WHITE);
mycolor.fillRect(130, 30,100, 80);
with the default color and }
specified width and
height.
4. public abstract void public class myGraphics extends Canvas{
drawOval(int x, int y, int
width, int height): is public void paint(Graphics mycolor) {
used to draw oval with the setBackground(Color.WHITE);
mycolor.drawOval(30,130,50, 60);
specified width and }
height.
5. public abstract void public class myGraphics extends Canvas{
fillOval(int x, int y, int
width, int height): is public void paint(Graphics mycolor) {
setBackground(Color.WHITE);
used to fill oval with the
setForeground(Color.RED);
default color and mycolor.fillOval(130,130,50, 60);
specified width and }
height.

Computer Science 4 | Page 2 of 6

 6. public abstract void public class myGraphics extends Canvas{
drawLine(int x1, int y1,
int x2, int y2): is used public void paint(Graphics mycolor) {
to draw line between the setBackground(Color.blue);
mycolor.drawLine(120, 60, 150, 200);
points(x1, y1) and (x2, }
y2).
7. public abstract void public class myGraphics extends Canvas{
drawArc(int x, int y, int
width, int height, int public void paint(Graphics mycolor) {
setBackground(Color.WHITE);
startAngle, int arcAngle):
setForeground(Color.RED);
is used draw a circular or mycolor.drawArc(30, 200, 40,50,90,60);
elliptical arc. }
8. public abstract void public class myGraphics extends Canvas{
fillArc(int x, int y, int
width, int height, int public void paint(Graphics mycolor) {
startAngle, int arcAngle): setBackground(Color.WHITE);
setForeground(Color.RED);
is used to fill a circular mycolor.fillArc(30, 130, 40,50,180,40);
or elliptical arc. }

Example:

import java.awt.*; // Using AWT's Graphics and Color

import javax.swing.*; // Using Swing's components and containers

/** Custom Drawing Code Template */

// A Swing application extends javax.swing.JFrame
public class myTemplate extends JFrame {
// Define constants
public static final int CANVAS_WIDTH = 640;
public static final int CANVAS_HEIGHT = 480;

// Declare an instance of the drawing canvas,

// which is an inner class called DrawCanvas extending javax.swing.JPanel.
private final DrawCanvas canvas;

// Constructor to set up the GUI components and event handlers

public myTemplate() {
canvas = new DrawCanvas(); // Construct the drawing canvas
canvas.setPreferredSize(new Dimension(CANVAS_WIDTH, CANVAS_HEIGHT));

// Set the Drawing JPanel as the JFrame's content-pane

Container cp = getContentPane();
cp.add(canvas);
// or "setContentPane(canvas);"

setDefaultCloseOperation(EXIT_ON_CLOSE); // Handle the CLOSE button

pack(); // Either pack() the components; or setSize()
setTitle("......"); // "super" JFrame sets the title
setVisible(true); // "super" JFrame show
}

Computer Science 4 | Page 3 of 6

 /**continuation…
* Define inner class DrawCanvas, which is a JPanel used for custom drawing.
*/
private class DrawCanvas extends JPanel {
// Override paintComponent to perform your own painting
@Override
public void paintComponent(Graphics mycolor) {
super.paintComponent(mycolor); // paint parent's background
setBackground(Color.BLUE); // set background color for this JPanel

// Your custom painting codes. For example,

// Drawing primitive shapes
mycolor.setColor(Color.YELLOW); // set the drawing color
mycolor.drawLine(120, 60, 150, 200);
mycolor.drawOval(200, 100, 150, 50);
mycolor.drawRect(400, 100, 50, 60);
mycolor.setColor(Color.ORANGE); // change the drawing color
mycolor.fillOval(150, 250, 150, 130);
mycolor.setColor(Color.PINK);
mycolor.fillRect(350, 265, 130, 100);
mycolor.setColor(Color.WHITE);
mycolor.fill3DRect(300, 390, 100, 70, rootPaneCheckingEnabled);
// Printing texts
mycolor.setColor(Color.WHITE);
mycolor.setFont(new Font("This space for Monospace", Font.PLAIN, 12));
mycolor.drawString("Area for testing colors ...", 10, 20);
}
}

// The entry main method

public static void main(String[] args) {
// Run the GUI codes on the Event-Dispatching thread for thread safety
SwingUtilities.invokeLater(new Runnable() {
@Override
public void run() {
new myTemplate(); // Let the constructor do the job
}
});
}
}

Computer Science 4 | Page 4 of 6

Output:

NAVIGATE

Learning Exercise: None - Graded

Create a simple template of a sudoku(6x6) program (not animated).

This is the sample output:

Computer Science 4 | Page 5 of 6

 KNOT

References
[1] Java.awt.graphics – JavaTpoint. (n.d.). Retrieved March 9, 2021, from
https://www.javatpoint.com/Java.awt.graphics
[2] Java.awt.graphics – Tutorialspoint. (n.d.). Retrieved March 9, 2021, from
https://www.tutorialspoint.com/java/Java.awt.graphics.htm
[3] Java.awt.graphics – java-examples (n.d.). Retrieved March 9, 2021, from
https://www.java-examples.com/Java.awt.graphics-examples
[3] Java.awt.graphics – docs.oracle (n.d.). Retrieved March 9, 2021, from
https://docs.oracle.com/javase/8/docs/api/java/lang/Java.awt.graphics.html

Prepared by : Leonil Tayco Suarez

Position : Special Science Teacher 3
Campus : PSHS-MRC

Computer Science 4 | Page 6 of 6

© 2020 Philippine Science High School System. All rights reserved. This document may contain proprietary information and may only be released
to third parties with approval of management. Document is uncontrolled unless otherwise marked; uncontrolled documents are not subject to
update notification.