Necesito generar un elemento de lienzo que tenga su propio color de fondo y en su centro un texto que use un fondo de imagen:
================== | | | Hello | | | ==================En este momento puedo mostrar un texto lleno de una imagen
const init = () => { const canvas = document.getElementById("canvas") const context = canvas.getContext('2d') context.font = 'bold 140px Times' context.textBaseline = 'center' const image = new Image() image.src = 'https://img.redbull.com/images/c_crop,x_0,y_0,h_1080,w_1620/c_fill,w_1500,h_1000/q_auto,f_auto/redbullcom/2017/08/29/03820845-b090-444f-86d1-e5259d11482f/most-heroic-pokemon.jpg.jpg' image.onload = () => { const pattern = context.createPattern(image, null) context.fillStyle = pattern context.fillText('Lorem ipsum', 0, 200) } } init() canvas { border: 1px solid #000; } <!doctype html> <html> <head> </head> <body> <canvas id="canvas" width="1920" height="1080"></canvas> </body> </html>Sé que puedo cambiar el fondo del lienzo usando css, pero obtengo un png transparente cuando guardo las imágenes con el botón derecho.
¿Cómo puedo configurar un fondo negro para el lienzo y configurar un texto con su propio fondo?
La API de Canvas tiene por defecto un fondo negro transparente ( imageData.data en un lienzo sin cambios serán todos ceros donde cada conjunto de cuatro valores indica valores RGBA). Puede usar fillRect en la API de Canvas para establecer el color de fondo de todo el lienzo .
Nota: puede configurar el estilo de relleno para cambiar el color, pero el valor predeterminado de la API de Canvas es #000 (black) para esta propiedad, por lo que solo necesita configurarlo explícitamente si se ha cambiado.
const init = () => { const canvas = document.getElementById("canvas") const context = canvas.getContext('2d') context.fillRect(0, 0, canvas.width, canvas.height) context.font = 'bold 140px Times' context.textBaseline = 'center' const image = new Image() image.src = 'https://img.redbull.com/images/c_crop,x_0,y_0,h_1080,w_1620/c_fill,w_1500,h_1000/q_auto,f_auto/redbullcom/2017/08/29/03820845-b090-444f-86d1-e5259d11482f/most-heroic-pokemon.jpg.jpg' image.onload = () => { const pattern = context.createPattern(image, null) context.fillStyle = pattern context.textAlign = "center" context.fillText('Lorem ipsum', canvas.width / 2, canvas.height / 2) } } init() canvas { border: 1px solid #000; } <!doctype html> <html> <head> </head> <body> <canvas id="canvas" width="1920" height="1080"></canvas> </body> </html>Gracias a Roko por alertarme sobre el requisito de centrado de la pregunta.
Hice algunos cambios en mi código para incluir alineación horizontal y vertical
Horizontal
context.textAlign = "center"Vertical
// already implemented in your code context.textBaseline = 'center' Usando fillText para centrar el texto completamente con la configuración anterior aplicada
context.fillText('Lorem ipsum', canvas.width / 2, canvas.height / 2)