CODEWITHSUNDEEP
javascriptcanvas
Maxime Isambert
Maxime Isambert

Reputation: 13

How to display several different images in canvas?

I get an issue with my javascript code... I'd like to display 5 lines of different pictures in my canvas but only one line is displayed and the LIFE function is only called 16 times (canvas.width / imgW). Why the LIFE function can't be called after the 'while' loop ?

Thank you !

This is the result i get

<script type="text/javascript">

    var canvas = document.getElementById('canvas');

    var ctx = canvas.getContext('2d');

    var tabImages = ['css3.svg', 'adobe-1.svg', 'html-5.svg', 'jquery.svg'];

    var canvasW = canvas.width;
    var canvasH = canvas.height;
    var imgW = 50;
    var imgH = 50;
    var x = 0, y = 0, i = 0, posY = 1, increImg = 0, posX = 0;


        /* I want to display 5 lines of pictures but only one is displayed */
        for(var lignes = 0 ; lignes < 5 ; lignes++) {

            i = 0;

            while(posX < canvasW) {

                /* That function is only called 16 times but i know only that 
                way to display several differentes images in canvas */
                (function(posX, posY) {
                    var img = new Image();

                    if(increImg === tabImages.length-1)
                        increImg = 0;

                    img.src = 'testanim/img/'+tabImages[increImg];

                    img.onload = function() {

                    ctx.drawImage(img, posX, posY, imgW, imgH);
                }
                })(posX, posY)

                i++;
                increImg++;
                posX = imgW * i;
            }
            posY = lignes * imgH;
        }


</script>

Upvotes: 1

Views: 493

Answers (1)

codeanjero
codeanjero

Reputation: 694

are you looking for something like à kind of gallery :

//our images
let imageArr = ["animage","another","another","another","another","another","another","another","another","another"];

//getting the context (mycanvas is the id of the canvas element)
let context = mycanvas.getContext("2d")
//checking the context
if(context)
// for all images in my array(can't do for in because of the calculation of position later on )
   for(let i = 0;i<imageArr.length;i++)
   {
      //creation of an image html element
      let imgel = document.createElement('img');
      //addition of src tag
      imgel.src=imageArr[i];
      //drawing of the image (parameters:(image, xcoordinates,ycoordinates,width,height)
      context.drawImage(imgel, (i%5)*100, (Math.floor(i/5))*100,100,100);
      //drawing a rectangle around them
      context.strokeRect((i%5)*100,(Math.floor(i/5))*100,100,100);
   }
canvas{border:1px solid black;}
<canvas id="mycanvas" height="500" width="500"></canvas>

so in order to have several lines of your image in your code you have to use % operator: for instance if you want 5 lines this gives you : (i%canvasW)*imgW what this does it simply stops after 5 images and if you have to go to the line(see below) it will start from 0 again : 0%5 = 0 1%5 = 1 , ... , 5%5 = 0 6%5 = 1

On the other side for the height if you want to go to the line you need to do some kind of oposite calculation which is / this gives you : Math.floor(i/5)*imgH This gives you the lines you are hoping for

so if i resume you will have :

ctx.drawImage(img, (i%canvasW)*imgW, Math.floor(i/5)*imgH, imgW, imgH);

and that's also why your while loop is not going through several lines, you have to calculate your posX differently like so :

posX = (i%canvasW)*imgW;

and throw in another variable for the height which will be the condition to stop your while loop

for instance let's say you want to stop once the last image of the last line is hit you would have to calculate this condition like so :

if(canv.getContext("2d"))
{

  let max = canv.width*canv.height;
  let current = 0;
  let imgW=50;
  let imgH=50;
  let i = 0;
  while(current<=max)
  {
    console.log("stuff");
    current = (Math.floor(i/canv.height)*imgH)*((i%canv.width)*imgW);
    i++;
  }
  }
<canvas id="canv" width="500" height="500"></canvas>

i strongly advise using for loops since you almost can calculate the number of steps for every problem :

for(let i = 0; i<(canvas.width*canvas.height);i++)

Upvotes: 1

Related Questions