MediaProjection producing distorted screenshot

I managed to get screenshots but the result is like this:

Original:

This is my code which i took from a few sources:

final ImageReader ir = ImageReader.newInstance(width, height, PixelFormat.RGBA_8888, 2);
  VirtualDisplay vd= mediaProjection.createVirtualDisplay("screen", width, height, dpi, 
  DisplayManager.VIRTUAL_DISPLAY_FLAG_OWN_CONTENT_ONLY | DisplayManager.VIRTUAL_DISPLAY_FLAG_PUBLIC, ir.getSurface(), null, null);

final String path=getActivity().getFilesDir().getAbsolutePath()+"/myscreen.jpg";
  ir.setOnImageAvailableListener(new OnImageAvailableListener() {

          //  @Override
            public void onImageAvailable(ImageReader reader) {
                Image image = null;
                FileOutputStream fos = null;
                Bitmap bitmap = null;

                try {
                    image = ir.acquireLatestImage();
                    fos = new FileOutputStream( path);
                    final Image.Plane[] planes = image.getPlanes();
                    final Buffer buffer = planes[0].getBuffer().rewind();
                    bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
                    bitmap.copyPixelsFromBuffer(buffer);
                    bitmap.compress(CompressFormat.JPEG, 85, fos);
                    image.close();

                } catch (Exception e) {
                    e.printStackTrace();
             ........
             ........

from MediaProjection producing distorted screenshot