codenameone - How to draw on top of an Image in CodeName One? -

i have been successful in drawing arbitrary paths on whole screen modifying definition of signaturepanel class according need. next, want want able draw on picture selected user. basically, picture should remain in background , should able manipulate it. tried mutable image don't quite how implement it. sort of code me started appreciated.

here's have coded far:

main class:-

package com.mycompany.myapp;   import com.codename1.ui.display; import com.codename1.ui.form; import com.codename1.ui.graphics; import com.codename1.ui.image; import com.codename1.ui.button; import com.codename1.ui.container; import com.codename1.ui.dialog; import com.codename1.ui.label; import com.codename1.ui.painter; import com.codename1.ui.plaf.uimanager; import com.codename1.ui.util.resources; import com.codename1.io.log; import com.codename1.io.multipartrequest; import com.codename1.ui.toolbar; import com.codename1.ui.urlimage; import com.codename1.ui.events.actionevent; import com.codename1.ui.events.actionlistener; import com.codename1.ui.geom.rectangle; import com.codename1.ui.layouts.borderlayout; import com.codename1.ui.layouts.layeredlayout; import com.codename1.ui.painter.painterchain;  import java.io.ioexception;  /**  * file generated <a href="https://www.codenameone.com/">codename one</a> purpose   * of building native mobile applications using java.  */ public class mainclass {      private form current;     private resources theme;      signaturepanel sp;      public void init(object context) {         theme = uimanager.initfirsttheme("/theme");          // enable toolbar on forms default         toolbar.setglobaltoolbar(true);          // pro feature, uncomment if have pro subscription         // log.bindcrashprotection(true);     }      public void start() {         if(current != null){             current.show();             return;         }         form hi = new form("hi world");         hi.setlayout(new borderlayout());          button browsegallery = new button("browse");          image test = image.createimage(1280, 800, 0xffff00);         hi.add(borderlayout.north,test);          hi.addcomponent(borderlayout.south, browsegallery); //        browsegallery.addactionlistener(new actionlistener<actionevent>() { // //          @override //          public void actionperformed(actionevent evt) { //              display.getinstance().opengallery(new actionlistener<actionevent>() { // //                  @override //                  public void actionperformed(actionevent e) { //                       //                  } //              }, display.gallery_image); //          } //        }         browsegallery.addactionlistener(new actionlistener<actionevent>() {              @override             public void actionperformed(actionevent evt) {                 // todo auto-generated method stub                 display.getinstance().opengallery(new actionlistener<actionevent>() {                      @override                     public void actionperformed(actionevent evt) {                         // todo auto-generated method stub                         try {                              //image mutable = image.createimage(1280, 800, 0x00ff00);                             //image image = urlimage.createimage((string)evt.getsource());                             //hi.add(borderlayout.center_behavior_center,mutable);                             //image.modifyalpha((byte) 10);                          } catch (exception e1) {                             // todo auto-generated catch block                             e1.printstacktrace();                         }                     }                 }, display.gallery_image);             }         }); //        hi.setglasspane(new painter() { //           //          @override //          public void paint(graphics g, rectangle rect) { //              // todo auto-generated method stub //              system.out.println("glasspane"); //          } //      });          sp = new signaturepanel();        // hi.getlayeredpane();        // hi.add(layeredlayout.enclosein(new layeredlayout(), sp);         system.out.println("before adding");         hi.addcomponent(borderlayout.center, sp);         system.out.println("after adding");         hi.show();     }      public void stop() {         current = display.getinstance().getcurrent();         if(current instanceof dialog) {             ((dialog)current).dispose();             current = display.getinstance().getcurrent();         }     }      public void destroy() {     }  } 

signaturepanel :-

package com.mycompany.myapp;  import com.codename1.ui.component; import com.codename1.ui.display; import com.codename1.ui.font; import com.codename1.ui.graphics; import com.codename1.ui.image; import com.codename1.ui.stroke; import com.codename1.ui.geom.dimension; import com.codename1.ui.geom.generalpath; import com.codename1.ui.geom.rectangle;  class signaturepanel extends component {      private final generalpath path = new generalpath();     private final stroke stroke = new stroke();     private final rectangle signaturerect = new rectangle();     private final font xfont;     private image value;      signaturepanel() {         stroke.setlinewidth(math.max(1, display.getinstance().converttopixels(1, true)/2));         getallstyles().setbgcolor(0xffff00);         getallstyles().setbgtransparency(10);         xfont = font.createsystemfont(font.face_system, font.style_bold, font.size_large);     }      /**      * overridden try make component sensitive possible       * drag events.  if don't this, requires longer drag before "drag"       * events kick in.      * @param x      * @param y      * @return       */     @override     protected int getdragregionstatus(int x, int y) {         return component.drag_region_likely_drag_xy;     }      /**      *       * @param g       */     @override     public void paint(graphics g) {         super.paint(g);          g.setcolor(0x666666);         calcsignaturerect(signaturerect);         g.drawrect(signaturerect.getx(), signaturerect.gety(), signaturerect.getwidth(), signaturerect.getheight());         g.drawstring("x", signaturerect.getx() + display.getinstance().converttopixels(1, true), signaturerect.gety() + signaturerect.getheight() / 2);         paintsignature(g);     }      /**      * paints signature portion of panel.  is reuised      * create image of signature.      * @param g       */     private void paintsignature(graphics g) {         g.setcolor(0x0);         boolean oldaa = g.isantialiased();         g.setantialiased(true);         g.drawshape(path, stroke);         g.setantialiased(oldaa);     }      /**      * calculates rectangle (in parent component space) used drawn "rectangle" inside      * user should draw signature.  tries create 16x9 rectangle      * fits inside component bit of padding (3mm on each edge).      * @param r output variable.      */     private void calcsignaturerect(rectangle r) {         int w = getwidth() - display.getinstance().converttopixels(6, true);         int h = (int)(w * 9.0 / 16.0);         if (h > getheight()) {             h = getheight() - display.getinstance().converttopixels(6, false);             w = (int)(h * 16.0 / 9.0);         }         r.setx(getx() + (getwidth() - w) / 2);         r.sety(gety() + (getheight() - h)/2);         r.setwidth(w);         r.setheight(h);     }      @override     protected dimension calcpreferredsize() {         display d = display.getinstance();         return new dimension(d.converttopixels(100, true), d.converttopixels(60, false));     }      @override     public void pointerpressed(int x, int y) {         path.moveto(x(x), y(y));          value = null;         repaint();     }      @override     public void pointerdragged(int x, int y) {         path.lineto(x(x), y(y));         value = null;         repaint();     }      @override     public void pointerreleased(int x, int y) {         value = null;         repaint();     }      /**      * converts x coordinate screen space, parent component space.      * @param x      * @return       */     private int x(int x) {         return x - getparent().getabsolutex();     }      /**      * converts y coordinate screen space parent component space.      * @param y      * @return       */     private int y(int y) {         return y - getparent().getabsolutey();     }      /**      * gets drawn signature image.  includes       * areas inside {@link #signaturerect}      * @return       */     private image getimage() {         calcsignaturerect(signaturerect);          image img = image.createimage(signaturerect.getwidth(), signaturerect.getheight(), 0xffffff);         graphics g = img.getgraphics();         g.translate(-signaturerect.getx(), -signaturerect.gety());         paintsignature(g);         return img;     }      /**      * resets signature blank path.      */     private void clear() {         path.reset();     } } 

please ignore commented out code

you can set image background of component in sp.getallstyles.setbgimage(), override paint(graphics g) on component now. should have image drawn shapes laid on top.