I need to make this: bar I tried with making a single rect but I don't know how to repeat it along the x. I tried repeating a image (svg) but it doesn't work too. I tried with background repeat in a div but the result is everytime the same: blank. I'd like to make it in canvas. This is my code:
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;
})
By assigning a fillStyle to a canvas you are really just doing one thing: determining a property. At this point you are not actually drawing anything yet. This is done using the appropriate drawing methods. In your case the fillRect() method would be a perfect fit. As the name implies, it draws a filled rectangle. It takes four parameters for it's position and the dimensions.
Here's an example:
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>