How to use Canvas class in J2ME

Hi guys🙂 Today I am going to write about how to use the Canvas class in J2ME. Actually you may think why I choose to write about a class instead of writing a complete application. The reason is, next we can learn GameCanvas class and then we are ready to develop a game for our mobile device. Isn’t it cool?

First of all don’t expect attractive and meaningful user interfaces in this blog post because my main idea is to show you how the methods in the Canvas class can be used in a normal application.😉

First figure shows you the initial interface just after you launch the application. As I have mentioned earlier there is nothing big or complicated. I just put three commands in the main screen and in short time you will be able to see where they are lead to.

Figure 1

I thought not to put the relevant code block for above interface because you guys are now expert of designing interfaces. But for those who are new, I am not going to put them behind. They can visit my GitHub repository and download the source files.

As you can see in the Figure 1 second interface, there are two options you can select. First take the “Plain Figures” option. Then you will be able to see an interface like Figure 2.

Plain figure interface
Figure 2

There I have tried to show you some methods that you can find under Canvas class. Let’s see the source code of that. I have explained the code as comments.

package anuja;

import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;

 * @author Anuja
public class MyCanvas extends Canvas {
//The Canvas class is a base class for writing applications that need to handle low-level events
//and to issue graphics calls for drawing to the display
// Canvas class is abstract

    // Renders the Canvas. The application must implement this method in order to paint any graphics. 
    protected void paint(Graphics g) {

        // getWidth() and getHeight() inherited from class javax.microedition.lcdui.Displayable
        int width = getWidth();
        int height = getHeight();

        // setColor() sets the current color to the specified RGB values.
        g.setColor(255, 255, 255); // White background

        // fillRect()fFills the specified rectangle with the current color
        g.fillRect(50, 50, width, height); // Background is apply for part of the screen

        g.setColor(255, 0, 0); // Set color to Red

        // Draws a line between the coordinates (x1,y1) and (x2,y2) using the current color and stroke style.
        g.drawLine(0, 0, 200, 200); // (x1, y1, x2, y2)

        // Fills a circular or elliptical arc covering the specified rectangle.
        g.fillArc(100, 100, 100, 100, 90, 180); // (x, y, width, height, startAngle, arcAngle )

        g.setColor(0, 255, 0); // Set color to Green

        // Fills the specified triangle will the current color
        g.fillTriangle(100, 0, 200, 100, 0, 100);

        g.setColor(0, 0, 255); // Set color to Blue

        // Draws the specified String using the current font and color.
        // The x,y position is the position of the anchor point.
        g.drawString("Hello", 50, 50, Graphics.BOTTOM | Graphics.HCENTER); // (Str, x, y, anchor)

Now will see the second option which is “Go Image”. In here what I tried to do is insert an image to the Canvas. The most important thing is how to identify key strokes also discussed here. Game lovers knows that the most important thing in their key board is arrow keys.😉 Here you can see an out put in your “Output” window when you are pressing one of those arrow keys. Let’s look at the interface and jump to the code.

Image interface
Figure 3
package anuja;

import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;

 * @author Anuja
public class ImgCanvas extends Canvas {

    protected void paint(Graphics g) {
        int width = getWidth();
        int height = getHeight();

        try {
            Image carImg = Image.createImage("car.png");

            // drawImage() draws the specified image by using the anchor point.
            // If anchor is not a legal value it gives a java.lang.IllegalArgumentException
            g.drawImage(carImg, width, height, Graphics.BOTTOM | Graphics.RIGHT);
        } catch (IOException ex) {

    // keyPressed() called when a key is pressed.
    // The getGameAction() method can be called to determine what game action, if any, is mapped to the key.
    // Class Canvas has an empty implementation of this method, and
    //the subclass has to redefine it if it wants to listen this method.
    protected void keyPressed(int keyCode) {
        //System.out.println("Key Pressed" + keyCode);

        int gameAction = getGameAction(keyCode);

            case Canvas.LEFT: System.out.println("Left"); break;
            case Canvas.RIGHT: System.out.println("Right"); break;
            case Canvas.UP: System.out.println("Up"); break;
            case Canvas.DOWN: System.out.println("Down"); break;

Following figure show you my “Output” widow which convey that I’m not lying to you guys😀

Output window
Figure 4

 Yep, that all I have to say today. Do you think that I have forgotten the novice guys? Never. Here is my Github link to download the full source code. Let’s meet another day. Hope not going to delay this time to come back🙂 Bye.

About AnujAroshA

An undergraduate in the stream of ICT (Information & Communication Technology). A simple person :)
This entry was posted in J2ME examples. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s