Android canvas line strokeCap round larger than simple line

Question

I am trying to draw a rounded line of a specific width on my imageView Bitmap.

So I drew a simple line with paintLine.strokeCap = Paint.Cap.ROUND and without this option.

Here is the result :

The first one is rounded and you can see it's larger than the bottom one.

Here is the code I use.

    val paintLine = Paint()
    paintLine.color = Color.WHITE
    paintLine.style = Paint.Style.FILL_AND_STROKE
    paintLine.strokeWidth = 40.0f
    paintLine.strokeCap = Paint.Cap.ROUND

    val workingBitmap = Bitmap.createBitmap(bitmap)
    val mutableBitmap = workingBitmap.copy(Bitmap.Config.ARGB_8888, true)

    val drawingBitmapCanvas = Canvas(mutableBitmap)

    drawingBitmapCanvas.apply {
        drawLine(300, 300, 400, 300, paintLine)
    }

I would like to know if there is a way to keep the same width with rounded line ?

Thanks.

Answer 1

This just requires a little bit of math on your part. The rounded stroke caps that are added to the line have a width/length that is equal to half the stroke of the paint.

Here is my code:

Paint linePaint =  new Paint();
Paint noCaplinePaint =  new Paint();

public void init(){
    linePaint.setColor(this.getResources().getColor(android.R.color.black));
    linePaint.setStyle(Paint.Style.FILL_AND_STROKE);
    linePaint.setStrokeWidth(40f);
    linePaint.setStrokeCap(Paint.Cap.ROUND);

    noCaplinePaint.setColor(this.getResources().getColor(android.R.color.black));
    noCaplinePaint.setStyle(Paint.Style.FILL_AND_STROKE);
    noCaplinePaint.setStrokeWidth(40f);
}

And then in onDraw:

canvas.drawLine(50f, 40f, 300f, 40f, noCaplinePaint);
canvas.drawLine(70f, 81f, 280f, 81f, linePaint);

Produces these lines:

So, to review, the size of a rounded line cap can be calculated like this:

additionalLengthFromRoundCap = lineStrokeWidth/2

and this cap will be added to both ends of the line, so the line will be strokeWidth units longer than drawn.