Necesito hacer esto: barra Intenté hacer un solo rect pero no sé cómo repetirlo a lo largo de la x. Intenté repetir una imagen (svg) pero tampoco funciona. Probé con repetición de fondo en un div pero el resultado es siempre el mismo: en blanco. Me gustaría hacerlo en lienzo. Este es mi código:
const canvas = document.getElementById('barre'); const ctx = canvas.getContext('2d'); const img = new Image(); img.src = '../img/barre.svg'; img.addEventListener('load', ()=>{ const ptrn = ctx.createPattern(img,'repeat-x'); ctx.fillStyle = ptrn; })Al asignar un estilo de relleno a un lienzo, en realidad solo está haciendo una cosa: determinar una propiedad. En este punto, todavía no estás dibujando nada. Esto se hace usando los métodos de dibujo apropiados. En su caso, el método fillRect() encajaría perfectamente. Como su nombre lo indica, dibuja un rectángulo relleno. Toma cuatro parámetros para su posición y las dimensiones.
Aquí hay un ejemplo:
const canvas = document.getElementById('barre'); const ctx = canvas.getContext('2d'); const img = new Image(); img.crossOrigin = ""; img.addEventListener('load', () => { const ptrn = ctx.createPattern(img, 'repeat-x'); ctx.fillStyle = ptrn; ctx.fillRect(0, 0, canvas.width, canvas.height) }); img.src = 'https://api.codetabs.com/v1/proxy?quest=https://picsum.photos/id/237/20/30'; <canvas id="barre"></canvas>