How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)

Question

I am using below code:

Answer 1

Thanks,

Above answer helped me a lot. But while working in typescript. I've faced issue while passing the simple text image in 'drawImage' function.

So, below is the modified changes of the above code as per the typescript/angular.

Html:

Initialization:

     @ViewChild('myCanvas', {static: false}) myCanvas: ElementRef;
    context: CanvasRenderingContext2D;

    @ViewChild('simpleText', {static: false}) simpleText: ElementRef;
    simpleTextContext: CanvasRenderingContext2D;
    
    // default values
    shapeConfigure:any={
        w : null,
        h : null,
        curve: 10 ,
        offsetY: 50,
        bottom: 200,
        textHeight: 64,
        isTri : false,
        angleSteps : 0
    };

    // canvas width height
    shapeCanvas={
        w: 800,
        h: 400
    }        
    iText:string = 'check text';
    sampleImage = new Image();
    dataURL:any='';

    ngAfterViewInit(): void {
        this.context = this.myCanvas.nativeElement.getContext('2d');
        var font = '60px impact';

        this.simpleTextContext = this.simpleText.nativeElement.getContext('2d');
        this.simpleText.nativeElement.height=60;
        this.simpleText.nativeElement.width=400;
        this.simpleTextContext.font = font;
        this.simpleTextContext.textBaseline = 'top';
        this.simpleTextContext.textAlign = 'left';
        this.simpleTextContext.fillText(this.iText.toUpperCase(), 200* 0.5, 0);

        this.dataURL = this.simpleText.nativeElement.toDataURL();
        console.log(this.dataURL);
        this.sampleImage.src = this.dataURL;    

        this.shapeConfigure={
            w : this.myCanvas.nativeElement.width,
            h : this.myCanvas.nativeElement.height,
            curve: 10 ,
            offsetY: 50,
            bottom: 200,
            textHeight: 64,
            isTri : false,
            angleSteps : 180 /this.shapeCanvas.w
        }

        this.renderBridgeText(false);
    }

Main Function:

        renderBridgeText(textChange) {     

        var curve = parseInt(this.shapeConfigure.curve, 10);
        var offsetY = parseInt(this.shapeConfigure.offsetY, 10);
        var textHeight = parseInt(this.shapeConfigure.textHeight, 10);
        var bottom = parseInt(this.shapeConfigure.bottom, 10);
        var isTri = this.shapeConfigure.isTri;

        this.context.clearRect(0, 0, this.shapeCanvas.w , this.shapeCanvas.h );

        if(textChange){
        this.simpleTextContext.clearRect(0, 0, this.shapeCanvas.w , this.shapeCanvas.h );
        this.simpleTextContext.fillText(this.iText.toUpperCase(), 200* 0.5, 0);
        this.dataURL = this.simpleText.nativeElement.toDataURL();
        }
        this.sampleImage.src = this.dataURL;


        this.sampleImage.onload = () => {
        /// slide and dice
        var i:number = this.shapeCanvas.w;
        var dltY:number = curve / textHeight;
        var y = 0;
        while (i--) {
            if (isTri) {
                y += dltY;
                if (i === (this.shapeCanvas.w * 0.5))
                    dltY = -dltY;
            } else {
                y = bottom - curve * Math.sin(i * this.shapeConfigure.angleSteps * Math.PI / 180);
            }
            
            this.context.drawImage(this.sampleImage, i, 0, 1, textHeight, i, this.shapeCanvas.h * 0.5 - offsetY / textHeight * y, 1, y);
        }
        }
    }