J2ME Scrolling Canvas

I’ve started to learn J2ME yesterday and I was looking for a easy way to scroll canvas in J2ME but without success (some people were even arguing that it’s impossible) and then I figured something out so here’s a little recipe…

Instead of putting graphics directly on the screen like in this part of an example code:

class CanvasList extends Canvas implements CommandListener{
    private Image image;

    public void paint(Graphics g){
       g.setColor(53,53,53); g.fillRect(0,0,width,height_that_is_too_big_to_fit);

We have to put it into the memory first:

class CanvasList extends Canvas implements CommandListener{
    // private Image image;

    public void paint(Graphics g){
       Image image = Image.createImage(width, put_here_max_height_of_your_picture);
       Graphics ig = image.getGraphics();
       ig.setColor(53,53,53); ig.fillRect(0,0,width,height_that_is_too_big_to_fit);

As you maybe figured out, you should use something else than a rectangle to see the difference – this is only an example. Now we need to display our canvas on the screen:

g.drawImage(image, 0, 0, Graphics.TOP | Graphics.LEFT);

And the most important part – how to make this thing move? It’s very simple. If you want to look at the bottom of canvas that is outside the screen just do something like this:

g.translate(0,-50); // moving graphic 0 px horizontal and -50 vertical
g.drawImage(image, 0, 0, Graphics.TOP | Graphics.LEFT);
repaint();

You can move your canvas using phone keypad by placing a variable in g.translate and changing it’s value after pressing a key. Here is little example:

protected void keyPressed(int keyCode){
    if (keyCode==56)
        { if (y_pos>(((canvas_vert_size-screen_height)*-1)-5)) { y_position = y_position-10; }}
    if (keyCode==50) { if (y_pos<0) { y_pos = y_pos+10; }}
    display.setCurrent(canvas);
    repaint();
    }

We are using y_pos for y coordinates passed to g.translate. Hope that’ll help somebody because I think it’s one of most common problems with graphic applications on mobile devices.