Cómo hacer efecto de texto de techo y efecto de texto de valle en HTML5 (o Fabric.js)

Estoy usando el siguiente código:

//     
Curve: 110
OffsetY: 0
Text height: 64
Bottom: 200
Text:

Necesito el efecto de texto como las imágenes de abajo, he intentado mucho para hacer esto, pero no puedo.

enter image description here

enter image description here

¿Por favor, puede alguien ayudarme?

¿También podemos usar el objeto activo de fabric.js con el contexto?

Aquí hay una versión modificada del código original (el código proporcionado en cuestión ha cambiado los valores en comparación con mi código original …)) que puede producir todas estas formas simplemente jugando con los parámetros:

Valle

Techo

Tejado invertido

Puente

El techo no es estupendo, pero te dejo agregar soporte de escala ya que esto es un ejemplo.

DEMO EN LÍNEA AQUÍ

Inicialización :

 var ctx = demo.getContext('2d'), /// context font = '64px impact', /// font w = demo.width, /// cache canvas width and height h = demo.height, curve, /// radius offsetY, /// offset for text bottom, /// bottom of text textHeight, /// text height (region of text) isTri = false, /// is triangle shaped (roof) dltY, /// delta for triangle angleSteps = 180 / w, /// angle steps for curved text i = w, /// "x" backwards y, /// top of text /// offscreen canvas that holds original text os = document.createElement('canvas'), octx = os.getContext('2d'); os.width = w; os.height = h; /// set font on off-screen canvas where we draw it octx.font = font; octx.textBaseline = 'top'; octx.textAlign = 'center'; 

Función principal :

 /// render function renderBridgeText() { /// demo stuff snipped (see link) /// clear canvases octx.clearRect(0, 0, w, h); ctx.clearRect(0, 0, w, h); /// draw text (text may change) octx.fillText(iText.value.toUpperCase(), w * 0.5, 0); /// slide and dice dltY = curve / textHeight; /// calculate delta for roof/triangle y = 0; /// reset y in case we do roof i = w; /// init "x" while (i--) { if (isTri) { /// bounce delta value mid-way for triangle y += dltY; if (i === (w * 0.5)|0) dltY = -dltY; } else { /// calc length based on radius+angle for curve y = bottom - curve * Math.sin(i * angleSteps * Math.PI / 180); } /// draw a slice ctx.drawImage(os, i, 0, 1, textHeight, i, h * 0.5 - offsetY / textHeight * y, 1, y); } }