title: Android canvas overlaying image
body: <p>I am trying to add an image to android canvas and be able to annotate the image with painting with finger. I have modified it 
  <a href="http://code.tutsplus.com/tutorials/android-sdk-create-a-drawing-app-interface-creation--mobile-19021" rel="nofollow noreferrer">from this tutorial at tuts plus</a></p>
  
  <p>I am able to just hard code an image from my drawables folder and paint on top of said image.My problem now is getting a canvas to overlay on top of my image that extends beyond the image itself. The idea is to be able to annotate the image and take notes outside of the image bounds.</p>
  
  <p>Here we have the screenshot of my pen action
   <img src="https://i.stack.imgur.com/B6mva.png" alt="enter image description here"></p>
  
  <p>and here I have the rendered output after trying several pen actions. 
      <img src="https://i.stack.imgur.com/Z47MY.png" alt="enter image description here"></p>
  
  <p>Here is my code. I apologize for attaching the whole thing, i am an extreme n00b at the androids so i am unsure what to attach. I'm trying to isolate my action to be called only when I call the 'startNew()' method, which is called when i hit the plus icon on my FAB button. In the original canvas WITHOUT the image, the pen renders and remains over the entirety of the white space. I have kept Log.i messages around to see in the console when which methods are called for some self awareness. </p>
  
  <pre><code>import android.content.Context;
  import android.content.res.Resources;
  import android.graphics.Bitmap;
  import android.graphics.BitmapFactory;
  import android.graphics.Canvas;
  import android.graphics.Color;
  import android.graphics.Matrix;
  import android.graphics.Paint;
  import android.graphics.Path;
  import android.graphics.Point;
  import android.graphics.PorterDuff;
  import android.graphics.PorterDuffXfermode;
  import android.util.AttributeSet;
  import android.util.Log;
  import android.util.TypedValue;
  import android.view.Display;
  import android.view.MotionEvent;
  import android.view.View;
  import android.view.ViewGroup;
  import android.view.WindowManager;
  import android.widget.ImageView;
  
  
  public class DrawingView extends ViewGroup {
  
  //drawing path
  private Path drawPath;
  //ImageView choosenImageView;
  //drawing and canvas paint
  private Paint drawPaint, canvasPaint;
  //initial color
  private int paintColor = 0xFF660000;
  //canvas
  private Canvas drawCanvas;
  //canvas bitmap
  private Bitmap canvasBitmap;
  private Bitmap bmp;
  private Bitmap mutableBitmap;
  private Bitmap newBitmap;
  private float brushSize, lastBrushSize;
  private boolean erase=false;
  private boolean theCanvas=false;
  
  
  
  private void setUpDrawing(){
      Resources res = getResources();
      Log.i("SETUP","OMG SO MUCH SETUP");
      brushSize = getResources().getInteger(R.integer.medium_size);
      lastBrushSize = brushSize;
      drawPath = new Path();
      drawPaint = new Paint();
      drawPaint.setColor(paintColor);
      drawPaint.setAntiAlias(true);
      drawPaint.setStrokeWidth(brushSize);
      drawPaint.setStyle(Paint.Style.STROKE);
      drawPaint.setStrokeJoin(Paint.Join.ROUND);
      drawPaint.setStrokeCap(Paint.Cap.ROUND);
      canvasPaint = new Paint(Paint.DITHER_FLAG);
  }
  public void startNew(){
      Log.i("NEW","SO NEWW");
      drawCanvas.drawColor(0, PorterDuff.Mode.CLEAR);
      Resources res=getResources();
      BitmapFactory.Options bmpFactoryOptions = new BitmapFactory.Options();
      bmpFactoryOptions.inScaled=false;
      bmpFactoryOptions.inJustDecodeBounds = false;
      bmp = BitmapFactory.decodeResource(res, R.drawable.jupiter, bmpFactoryOptions);
      mutableBitmap=bmp.copy(Bitmap.Config.ARGB_8888, true);
      drawCanvas.drawBitmap(mutableBitmap,0,0,drawPaint);
      canvasBitmap=mutableBitmap;
      theCanvas=true;
      drawCanvas = new Canvas(canvasBitmap);
      invalidate();
  }
  public void putOverlay(Bitmap bitmap, Bitmap overlay) {
      Canvas canvas = new Canvas(bitmap);
      Paint paint = new Paint(Paint.FILTER_BITMAP_FLAG);
      canvas.drawBitmap(overlay, 0, 0, paint);
  }
  public void setErase(boolean isErase){
  //set erase true or false
      erase=isErase;
      if(erase) drawPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
      else drawPaint.setXfermode(null);
  }
  public void setBrushSize(float newSize){
  //update size
      float pixelAmount = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
              newSize, getResources().getDisplayMetrics());
      brushSize=pixelAmount;
      drawPaint.setStrokeWidth(brushSize);
  }
  
  public void setLastBrushSize(float lastSize){
      lastBrushSize=lastSize;
  }
  public float getLastBrushSize(){
      return lastBrushSize;
  }
  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  //view given size
      super.onSizeChanged(w, h, oldw, oldh);
      Log.i("SIZEE", "THE ISZEE IS CHANGES");
      bmp = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
      canvasBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
      mutableBitmap = Bitmap.createBitmap(w,h,Bitmap.Config.ARGB_8888);
      drawCanvas = new Canvas(canvasBitmap);
  }
  
  @Override
  protected void onDraw(Canvas canvas) {
  //draw view
      if(theCanvas){
          canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
          canvas.drawPath(drawPath, drawPaint);
          }else {
          canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
          canvas.drawPath(drawPath, drawPaint);
          }
  }
  
  @Override
  protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
      final int count = getChildCount();
      Log.i("onlayout","hello shouldn't come heres");
  }
  
  
  
  @Override
  public boolean onTouchEvent(MotionEvent event) {
  //detect user touch
  
      float touchX = event.getX();
      float touchY = event.getY();
  
      switch (event.getAction()) {
          case MotionEvent.ACTION_DOWN:
              Log.i("onDown","hello onpen DOWN");
              drawPath.moveTo(touchX, touchY);
              break;
          case MotionEvent.ACTION_MOVE:
              //Log.i("onMOVINGS","hello ondraw");
              drawPath.lineTo(touchX, touchY);
              break;
          case MotionEvent.ACTION_UP:
              Log.i("line","drew some shitty line");
              drawCanvas.drawPath(drawPath, drawPaint);
              drawPath.reset();
              break;
          default:
              return false;
      }
      invalidate();
      return true;
  }
  
  public void setColor(String newColor){
  //set color
      invalidate();
      paintColor = Color.parseColor(newColor);
      drawPaint.setColor(paintColor);
  
  
  }
  public DrawingView(Context context, AttributeSet attrs) {
      super(context, attrs);
      setUpDrawing();
      Log.i("someshintg","context1");
  
  }
  
  public DrawingView(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
      Log.i("someshintg","context2");
  
  }
  public DrawingView(Context context) {
      super(context);
      Log.i("someshintg","context3");
  }
  }
  </code></pre>
  
  <p>UPDATE:</p>
  
  <pre><code>public void startNew(){
      Log.i("NEW","SO NEWW");
      drawCanvas.drawColor(0, PorterDuff.Mode.CLEAR);
      Resources res=getResources();
      BitmapFactory.Options bmpFactoryOptions = new BitmapFactory.Options();
      bmpFactoryOptions.inScaled=false;
      bmpFactoryOptions.inJustDecodeBounds = false;
      bmp = BitmapFactory.decodeResource(res, R.drawable.jupiter, bmpFactoryOptions);
      mutableBitmap=bmp.copy(Bitmap.Config.ARGB_8888, true);
      drawCanvas.drawBitmap(mutableBitmap,0,0,drawPaint);
      //canvasBitmap=mutableBitmap;
      theCanvas=true;
      //drawCanvas = new Canvas(canvasBitmap);
      invalidate();
  }
  </code></pre>
  
  <p>I edited my code to try to not modify the drawCanvas object and simply make the mutable bitmap the bitmap associated with the image itself. the result is that the image takes up too much space, which i thought was odd because i used <code>inScaled=false;</code> to get it to not match parent previously. I have tried using ImageView placeholders in my XML layout in prior attempts but I cannot get them to render in the canvas itself; the imageView renders as a sibling UNDER the canvas but when placed as a child of the canvas it is not visible. here is screenshot of the current code implementation:</p>
  
  <p><img src="https://i.stack.imgur.com/zYKIl.png" alt="enter image description here"></p>