title: Android canvas multiple draws causes flickering
body: <p>the keywords about this topic: </p>
  
  <ol>
  <li>CustomSurfaceView: three custom surfaceview for three different levels.</li>
  <li>Canvas: lock/unlockAndPost method (i'm not using custom bitmap ) </li>
  <li>Multi thread ( each surface is a separate thread ) </li>
  <li>Shapes ( shapes on canvas ) </li>
  <li>Client/Server ( architecture )  </li>
  <li>Flickering ( IS WHY I'M HERE ) </li>
  </ol>
  
  <p>We are developing a client/server application and I'm working on the client side. I'm receiving messages from the server containing general data (coordinates, color, width [...] ) about paths like, circle, rectangle, line and other shapes. The web application allows the user to send these data drawing on <strong>HTML5 Canvas</strong>, to an android device that receiving this messages and parsing it, will be able to redraw all the shapes. From my own experience on this subjects, I learned that the best way to keep in control all the things you draw on the canvas, is saving everything into a buffer, array, list or something like that, then reuse it when you want (for example, you can use the older path for show, hide, move or simply change something on the canvas). In my opinion, the android application follows the best practice of android development and OOP paradigm so I'm not assuming errors related to the bad architecture. In this case, I'm saving the messages on web client side. When the user draws on HTML5 Canvas, the messages which contain shape info are perfectly reported to the android canvas, but the problem appears when:</p>
  
  <p>[example]
  Consider you draw 10 objects (10 messages) and you want <strong>delete only one</strong> object on web app canvas, so the only way is clearing all the canvas, and redraw all the previous <strong>shapes without the deleted shape</strong> (so resend to the client 9 messages by loop the messages buffer ). This method works perfectly for the web app but cause <strong>flickering problem on android client</strong>. So after too many experiments I found a workaround, using a Thread.sleep(100)(Whooo! 100ms is too much), in order to parse slowly the messages and let the surfaceview thread to read correctly the data (data access through singleton pattern) and write on the double-buffer of the canvas.Well, it's slow and ugly but it works ! Actually I don't like this “horrible” workaround so please help me to see an exit strategy. </p>
  
  <p>This is a piece of code where the canvas get data from shapes containers and draw if data are present. The data of each containers came from server messages.</p>
  
  <pre><code>@Override
  public void run() {
      Canvas canvas = null;
      while (running) {
          //this is the surface's canvas
          try {
              canvas = shapesSurfaceHolder.lockCanvas();
              synchronized (shapesSurfaceHolder) {
                  if (shapesSurfaceHolder.getSurface().isValid()) {
                      if(!Parser.cmdClear){
  
                          //draw all the data present
                          canvas.drawPath(PencilData.getInstance().getPencilPath(),
                                  PencilData.getInstance().getPaint());
                          canvas.drawPath(RectData.getInstance().getRectPath(),
                                  RectData.getInstance().getPaint());
                          canvas.drawPath(CircleData.getInstance().getCirclePath(),
                                  CircleData.getInstance().getPaint());
                          canvas.drawPath(LineData.getInstance().getLinePath(),
                                  LineData.getInstance().getPaint());
                          canvas.drawText(TextData.getInstance().getText(),
                                  TextData.getInstance().getX(),
                                  TextData.getInstance().getY(),
                                  TextData.getInstance().getPaint());
  
                      } else {
                          //remove all canvas content and clear data.
                          canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
                          for (int i = 0; i &lt; AbstractFactory.SHAPE_NUM; i++) {
                              abstracFactory.getShape(i).clearData();
                          }
                      }
                  }
              }
          } finally {
              if (canvas != null) {
                  shapesSurfaceHolder.unlockCanvasAndPost(canvas);
              }
          }
      }
  }//end_run()
  </code></pre>
  
  <p><strong>I can summarize that, apparently, my problem is to draw too quickly</strong> </p>
  
  <p><strong>Note:</strong></p>
  
  <p>Similar concept: <a href="https://stackoverflow.com/questions/31124496/android-thread-controlling-multiple-texture-views-causes-strange-flickering">Android thread controlling multiple texture views causes strange flickering</a></p>
  
  <p>Hardware acceleration is enabled.</p>
  
  <p>minSdkVersion 17</p>
  
  <p>Tested on </p>
  
  <ul>
  <li><p>Tablet Samsung SM-T113</p></li>
  <li><p>Google Nexus 5</p></li>
  </ul>