So far i got the code:
var image = new Image();
image.onload = function() {
// create an off-screen canvas
var patt = document.createElement('canvas');
// set the resized width and height
patt.width = sirinaopto;
patt.height = sirinaopto;
patt.getContext('2d').drawImage(this, 0,0, patt.width, patt.height);
// pass the resized canvas to your createPattern
drawBG(patt);
image.src = 'img/e.svg'
//repeat background
function drawBG(patternCanvas) {
var space = ctx.createPattern(patternCanvas, 'repeat');
ctx.fillStyle = space;
ctx.save();
ctx.translate(zacetek, 0);
ctx.fillRect(0, 0, ctx.canvas.width, visina2);
ctx.restore();
}
What this does is create pattern with one image "img/e.svg". Lets say I have 4-5 images (e.svg, e1.svg, e2.svg..... ) How could I create the same pattern but use all of the pictures and use them randomly in the pattern? The patern would look simmilar to: e.svg, e3.svg, e.svg, e2.svg.... instead of e.svg, e.svg, e.svg.....
Aucun commentaire:
Enregistrer un commentaire