samedi 26 décembre 2015

Canvas random images in pattern

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