Canvas background is black when drawing a path

[bellalMohamed]

the background of the canvas is black instead of transparent like android

[farfromrefug]

try and put backgroundColor="transparent" If that works i will fix it EDIT: nice shape. Do you mind sharing the values? How did you "find' the values. I am constantly looking for a tool to easily generate them

[bellalMohamed]

It works perfectly, thank you so much for this amazing plugin <3

For I sure I don't mind sharing the values, I found these values online, someone shared in on an article

this is the whole function.

public draw(event) {
        let canvas: Canvas =  event.canvas;
        const mPaint = new Paint();
        let mPath = new Path();

        mPaint.setColor(new Color('white'));

       let mNavigationBarWidth = Screen.mainScreen.widthDIPs;
       let mNavigationBarHeight = 60;
       let CURVE_CIRCLE_RADIUS = 30;
       let CURVE_WIDTH = 2;
        // the coordinates (x,y) of the start point before curve
        let mFirstCurveStartPoint = {x: (mNavigationBarWidth / 2) - (CURVE_CIRCLE_RADIUS * CURVE_WIDTH) - (CURVE_CIRCLE_RADIUS / 20), y: 0};
        // the coordinates (x,y) of the end point after curve
        let mFirstCurveEndPoint = {x: mNavigationBarWidth / 2, y: CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4)};
        // same thing for the second curve
        let mSecondCurveStartPoint = mFirstCurveEndPoint;
        let mSecondCurveEndPoint = {x: (mNavigationBarWidth / 2) + (CURVE_CIRCLE_RADIUS * CURVE_WIDTH) + (CURVE_CIRCLE_RADIUS / 20), y: 0};

        // the coordinates (x,y)  of the 1st control point on a cubic curve
        let mFirstCurveControlPoint1 = {x: mFirstCurveStartPoint.x + CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4), y: mFirstCurveStartPoint.y};
        // the coordinates (x,y)  of the 2nd control point on a cubic curve
        let mFirstCurveControlPoint2 = {x: mFirstCurveEndPoint.x - (CURVE_CIRCLE_RADIUS * CURVE_WIDTH) + CURVE_CIRCLE_RADIUS, y: mFirstCurveEndPoint.y};

        let mSecondCurveControlPoint1 = {x: mSecondCurveStartPoint.x + (CURVE_CIRCLE_RADIUS * CURVE_WIDTH) - CURVE_CIRCLE_RADIUS, y: mSecondCurveStartPoint.y};
        let mSecondCurveControlPoint2 = {x: mSecondCurveEndPoint.x - (CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4)), y:mSecondCurveEndPoint.y};

        mPath.reset();
        mPath.moveTo(0, 0);
        mPath.lineTo(mFirstCurveStartPoint.x, mFirstCurveStartPoint.y);

        mPath.cubicTo(mFirstCurveControlPoint1.x, mFirstCurveControlPoint1.y, mFirstCurveControlPoint2.x, mFirstCurveControlPoint2.y, mFirstCurveEndPoint.x, mFirstCurveEndPoint.y);

        mPath.cubicTo(mSecondCurveControlPoint1.x, mSecondCurveControlPoint1.y, mSecondCurveControlPoint2.x, mSecondCurveControlPoint2.y, mSecondCurveEndPoint.x, mSecondCurveEndPoint.y);

        mPath.lineTo(mNavigationBarWidth, 0);
        mPath.lineTo(mNavigationBarWidth, mNavigationBarHeight);
        mPath.lineTo(0, mNavigationBarHeight);
        mPath.close();

        canvas.drawPath(mPath, mPaint);

    }

[PabloPG]

@bellalMohamed how did you set the transparent background? In my version 4.0.37 it always appears with a white background;

[farfromrefug]

@PabloPG white background is something else. Without more detail we cant really help you