Home>

The code is not mine. Code taken from codepen.io (This is the original of this code) https://codepen.io/BakhtiyarUmutbayev/pen/ZEXgamV?editors=0010. I edited the code for myself.

Here is a link to the site where I inserted this animation http://darhanyd.beget.tech/product/kontrollery/

There are pictures left, here is a screen (You need to scroll a little lower on the site):

The question is how to remove pictures that remain in the background? I am a beginner developer and not strong in canvas. I ask you to help. I would be very grateful for any advice, help.

var totalImages= 96,
  canv= document.getElementById('video_img_anim'),
  canv_images= canv.dataset.img,
  context_imgset= canv.getContext('2d'),
  images= [];
canv_images= canv_images.split(' ')
canv_images.forEach(img_src=> {
  var img= document.createElement('img')
  if (img_src != NaN &
&
 img_src != " " &
&
 img_src != "" &
&
 img_src != undefined) {
    img.src= img_src
    images.push(img)
  }
});
var currentLocation= 0;
var setImage= function(newLocation) {
  context_imgset.drawImage(images[newLocation], 0, 0, canv.width, canv.height);
}
var wheelDistance= function(evt) {
  if (!evt) evt= event;
  var w= evt.wheelDelta,
    d= evt.detail;
  if (d) {
    if (w) return w /d /40 * d > 0 ? 1 : -1; //Opera
    else return -d /3; //Firefox;         TODO: do not /3 for OS X
  } else return w /120; //IE/Safari/Chrome TODO: /3 for Chrome OS X
}
var wheelDirection= function(evt) {
  if (!evt) evt= event;
  return (evt.detail < 0) ? 1 : (evt.wheelDelta > 0) ? 1 : -1;
};
var MouseWheelHandler= function(e) {
  //The following equation will return either a 1 for scroll down
  //or -1 for a scroll up
  var distance= wheelDistance(e);
  var direction= wheelDirection(e);
  //This code mostly keeps us from going too far in either direction
  currentLocation -= Math.round(distance * 3);
  if (currentLocation < 0) currentLocation= 0;
  if (currentLocation >= images.length)
    currentLocation= images.length -1;
  setImage(currentLocation);
};
//IE9, Chrome, Safari, Opera,  Firefox
window.addEventListener("wheel", MouseWheelHandler, false);
setImage(4);
<canvas width="380" height="380" class="video_img_anim" id="video_img_anim" data-img="https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation73.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation74.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation75.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation76.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation77.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation78.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation79.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation80.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation81.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation82.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation83.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation84.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation85.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation86.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation87.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation88.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation89.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation90.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation91.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation92.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation93.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation94.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation95.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation00.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation01.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation02.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation03.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation04.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation05.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation06.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation07.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation08.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation09.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation10.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation11.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation12.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation13.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation14.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation15.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation16.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation17.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation18.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation19.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation20.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation21.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation22.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation23.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation24.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation25.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation26.png"></canvas>

Let's continue the discussion in the chat.

Grundy2022-01-22 20:19:32
  • Answer # 1

    I was helped to understand the issue. I used clearRect. Here is the solution:

    var totalImages= 96,
      canv= document.getElementById('video_img_anim'),
      canv_images= canv.dataset.img,
      context_imgset= canv.getContext('2d'),
      images= [];
    canv_images= canv_images.split(' ')
    canv_images.forEach(img_src=&gt; {
      var img= document.createElement('img')
      if (img_src != NaN &
    &
     img_src != " " &
    &
     img_src != "" &
    &
     img_src != undefined) {
        img.src= img_src
        images.push(img)
      }
    });
    var currentLocation= 0;
    var setImage= function(newLocation) {
      context_imgset.clearRect(0, 0, canv.width, canv.height);
      context_imgset.drawImage(images[newLocation],
     0, 0, canv.width, canv.height);
    }
    var wheelDistance= function(evt) {
      if (!evt) evt= event;
      varw= evt.wheelDelta,
        d= evt.detail;
      if (d) {
        if (w) return w /d /40 * d &gt; 0? eleven; //Opera
        else return -d /3; //firefox; TODO: do not /3 for OS X
      } else return w /120; //IE/Safari/Chrome TODO: /3 for Chrome OS X
    }
    var wheelDirection= function(evt) {
      if (!evt) evt= event;
      return (evt.detail &lt; 0) ? 1 : (evt.wheelDelta &gt; 0) ? eleven;
    };
    var MouseWheelHandler= function(e) {
      //The following equation will return either a 1 for scroll down
      //or -1 for a scroll up
      var distance= wheelDistance(e);
      var direction= wheelDirection(e);
      //This code mostly keeps us from going too far in either direction
      currentLocation -= Math.round(distance * 3);
      if (currentLocation&lt; 0) currentLocation= 0;
      if (currentLocation&gt;= images.length)
        currentLocation= images.length -1;
      setImage(currentLocation);
    };
    //IE9, Chrome, Safari, Opera, Firefox
    window.addEventListener("wheel", MouseWheelHandler, false);
    setImage(4);
    &lt;canvas width="380" height="380" class="video_img_anim" id="video_img_anim" data-img="https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation73.png https://picpig .ru/images/2022/01/22/Home_Homecenter_Animation74.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation75.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation76 .png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation77.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation78.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation79.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation80.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation81.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation82.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation83.png https://picpig.ru/images/2022/01/22 /Home_Homecenter_Animation84.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation85.png https://picpig.ru/images/2022/0 1/22/Home_Homecenter_Animation86.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation87.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation88.png https://picpig .ru/images/2022/01/22/Home_Homecenter_Animation89.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation90.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation91 .png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation92.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation93.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation94.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation95.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation00.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation01.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation02.png https://picpig.ru/images/2022/01/22 /Home_Homecenter_Animation03.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation04.png https://pic pig.ru/images/2022/01/22/Home_Homecenter_Animation05.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation06.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation07.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation08.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation09.png https://picpig.ru/images /2022/01/22/Home_Homecenter_Animation10.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation11.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation12.png https: //picpig.ru/images/2022/01/22/Home_Homecenter_Animation13.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation14.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation15.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation16.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation17.png https://picpig.ru /images/2022/01/22/Home_Homecenter_Animation18.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animati on19.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation20.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation21.png https://picpig.ru/images /2022/01/22/Home_Homecenter_Animation22.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation23.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation24.png https: //picpig.ru/images/2022/01/22/Home_Homecenter_Animation25.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation26.png"&gt;&lt;/canvas&gt;
  • Answer # 2

    To clear the canvas of a previous image, you can use the method, which will fill the specified area with transparent black.

    var totalImages= 96,
      canv= document.getElementById('video_img_anim'),
      canv_images= canv.dataset.img,
      context_imgset= canv.getContext('2d'),
      images= [];
    canv_images= canv_images.split(' ')
    canv_images.forEach(img_src=&gt; {
      var img= document.createElement('img')
      if (img_src != NaN &
    &
     img_src != " " &
    &
     img_src != "" &
    &
     img_src != undefined) {
        img.src= img_src
        images.push(img)
      }
    });
    var currentLocation= 0;
    var setImage= function(newLocation) {
      context_imgset.clearRect(0, 0, canv.width, canv.height); //erase
      context_imgset.drawImage(images[newLocation],
     0, 0, canv.width, canv.height); //draw
    }
    requestAnimationFrame(function animate() {
      setImage(currentLocation);
      currentLocation= (currentLocation + 1) % images.length;
      requestAnimationFrame(animate);
    });
    &lt;canvas width="380" height="180" class="video_img_anim" id="video_img_anim" data-img="https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation73.png https://picpig .ru/images/2022/01/22/Home_Homecenter_Animation74.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation75.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation76 .png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation77.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation78.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation79.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation80.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation81.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation82.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation83.png https://picpig.ru/images/2022/01/22 /Home_Homecenter_Animation84.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation85.png https://picpig.ru/images/2022/0 1/22/Home_Homecenter_Animation86.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation87.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation88.png https://picpig .ru/images/2022/01/22/Home_Homecenter_Animation89.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation90.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation91 .png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation92.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation93.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation94.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation95.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation00.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation01.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation02.png https://picpig.ru/images/2022/01/22 /Home_Homecenter_Animation03.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation04.png https://pic pig.ru/images/2022/01/22/Home_Homecenter_Animation05.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation06.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation07.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation08.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation09.png https://picpig.ru/images /2022/01/22/Home_Homecenter_Animation10.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation11.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation12.png https: //picpig.ru/images/2022/01/22/Home_Homecenter_Animation13.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation14.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation15.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation16.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation17.png https://picpig.ru /images/2022/01/22/Home_Homecenter_Animation18.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animati on19.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation20.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation21.png https://picpig.ru/images /2022/01/22/Home_Homecenter_Animation22.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation23.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation24.png https: //picpig.ru/images/2022/01/22/Home_Homecenter_Animation25.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation26.png"&gt;&lt;/canvas&gt;

    Many thanks! Finished in my example.

    Бахтияр Умутбаев2022-01-22 20:35:02