How to redraw canvas by onClick event within few seconds in different position?

user_14735793 0
Viewed 125

I want to redraw canvas multiple times on different positions within few seconds from bottom until user's selected button/link. enter image description here

From example image, if user click 5th floor items then the lift should move slowly until 5th floor from ground floor. Thanks for any kind of approach. From the code that attached, if click any floor items, the lift moving directly until that level because I put fixed size. what I need is to move the lift slowly until selected floor. Hope I can make everyone understand the scenario.

function load() {
   var context = document.getElementById('main').getContext("2d");
   context.moveTo(80,0);
   context.lineTo(80,1000);
   context.moveTo(50,0);
   context.lineTo(50,1000);
   context.moveTo(110,0);
   context.lineTo(110,1000);
   context.font = "20px Arial";
   context.fillText("G",130,940);
   context.fillText("1st",130,850);
   context.fillText("2nd",130,760);
   context.fillText("3rd",130,670);
   context.fillText("4th",130,580);
   context.fillText("5th",130,495);
   context.fillText("6th",130,405);
   context.fillText("7th",130,315);
   context.fillText("8th",130,225);
   context.fillText("9th",130,135);
   context.fillText("10th",125,50);
   context.stroke();

   var floorTen = document.getElementById('floorTen');
   var floorNine = document.getElementById('floorNine');
   var floorEight = document.getElementById('floorEight');
   var floorSeven = document.getElementById('floorSeven');
   var floorSix = document.getElementById('floorSix');
   var floorFive = document.getElementById('floorFive');
   var floorFour = document.getElementById('floorFour');
   var floorThree = document.getElementById('floorThree');
   var floorTwo = document.getElementById('floorTwo');
   var floorOne = document.getElementById('floorOne');
   var floorG = document.getElementById('floorG');

   //default position
   var posX = 48;
   var posY = 905;

   //floor distance
   var snapG = 10;
   var snap1 = 90;
   var snap2 = 185;
   var snap3 = 270;
   var snap4 = 360;
   var snap5 = 450;
   var snap6 = 540;
   var snap7 = 620;
   var snap8 = 710;
   var snap9 = 800;
   var snap10 = 890;

  var imgLoaded = false;

   var img = new Image();
   //img.src = "http://via.placeholder.com/50x50";
   img.src = "Elevatorai.png";

   img.onload = function() {
      imgLoaded = true;
      context.drawImage(img, posX, posY, img.width/21, img.height/29);
   };


   // Floor button click
   floorTen.onclick = function() {
      if (!imgLoaded) return;
      posY = posY - snap10;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.moveTo(80,0);
      context.lineTo(80,1000);
      context.moveTo(50,0);
      context.lineTo(50,1000);
      context.moveTo(110,0);
      context.lineTo(110,1000);
      context.font = "20px Arial";
      context.fillText("G",130,940);
      context.fillText("1st",130,850);
      context.fillText("2nd",130,760);
      context.fillText("3rd",130,670);
      context.fillText("4th",130,580);
      context.fillText("5th",130,495);
      context.fillText("6th",130,405);
      context.fillText("7th",130,315);
      context.fillText("8th",130,225);
      context.fillText("9th",130,135);
      context.fillText("10th",125,50);
      context.stroke();
      context.drawImage(img, posX, posY, img.width/21, img.height/29);
   };

   floorNine.onclick = function() {
      if (!imgLoaded) return;
      posY = posY - snap9;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.moveTo(80,0);
      context.lineTo(80,1000);
      context.moveTo(50,0);
      context.lineTo(50,1000);
      context.moveTo(110,0);
      context.lineTo(110,1000);
      context.font = "20px Arial";
      context.fillText("G",130,940);
      context.fillText("1st",130,850);
      context.fillText("2nd",130,760);
      context.fillText("3rd",130,670);
      context.fillText("4th",130,580);
      context.fillText("5th",130,495);
      context.fillText("6th",130,405);
      context.fillText("7th",130,315);
      context.fillText("8th",130,225);
      context.fillText("9th",130,135);
      context.fillText("10th",125,50);
      context.stroke();
      context.drawImage(img, posX, posY, img.width/21, img.height/29);
   };

   floorEight.onclick = function() {
      if (!imgLoaded) return;
      posY = posY - snap8;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.moveTo(80,0);
      context.lineTo(80,1000);
      context.moveTo(50,0);
      context.lineTo(50,1000);
      context.moveTo(110,0);
      context.lineTo(110,1000);
      context.font = "20px Arial";
      context.fillText("G",130,940);
      context.fillText("1st",130,850);
      context.fillText("2nd",130,760);
      context.fillText("3rd",130,670);
      context.fillText("4th",130,580);
      context.fillText("5th",130,495);
      context.fillText("6th",130,405);
      context.fillText("7th",130,315);
      context.fillText("8th",130,225);
      context.fillText("9th",130,135);
      context.fillText("10th",125,50);
      context.stroke();
      context.drawImage(img, posX, posY, img.width/21, img.height/29);
   };

   floorSeven.onclick = function() {
      if (!imgLoaded) return;
      posY = posY - snap7;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.moveTo(80,0);
      context.lineTo(80,1000);
      context.moveTo(50,0);
      context.lineTo(50,1000);
      context.moveTo(110,0);
      context.lineTo(110,1000);
      context.font = "20px Arial";
      context.fillText("G",130,940);
      context.fillText("1st",130,850);
      context.fillText("2nd",130,760);
      context.fillText("3rd",130,670);
      context.fillText("4th",130,580);
      context.fillText("5th",130,495);
      context.fillText("6th",130,405);
      context.fillText("7th",130,315);
      context.fillText("8th",130,225);
      context.fillText("9th",130,135);
      context.fillText("10th",125,50);
      context.stroke();
      context.drawImage(img, posX, posY, img.width/21, img.height/29);
   };

   floorSix.onclick = function() {
      if (!imgLoaded) return;
      posY = posY - snap6;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.moveTo(80,0);
      context.lineTo(80,1000);
      context.moveTo(50,0);
      context.lineTo(50,1000);
      context.moveTo(110,0);
      context.lineTo(110,1000);
      context.font = "20px Arial";
      context.fillText("G",130,940);
      context.fillText("1st",130,850);
      context.fillText("2nd",130,760);
      context.fillText("3rd",130,670);
      context.fillText("4th",130,580);
      context.fillText("5th",130,495);
      context.fillText("6th",130,405);
      context.fillText("7th",130,315);
      context.fillText("8th",130,225);
      context.fillText("9th",130,135);
      context.fillText("10th",125,50);
      context.stroke();
      context.drawImage(img, posX, posY, img.width/21, img.height/29);
   };

   floorFive.onclick = function() {
      if (!imgLoaded) return;
      posY = posY - snap5;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.moveTo(80,0);
      context.lineTo(80,1000);
      context.moveTo(50,0);
      context.lineTo(50,1000);
      context.moveTo(110,0);
      context.lineTo(110,1000);
      context.font = "20px Arial";
      context.fillText("G",130,940);
      context.fillText("1st",130,850);
      context.fillText("2nd",130,760);
      context.fillText("3rd",130,670);
      context.fillText("4th",130,580);
      context.fillText("5th",130,495);
      context.fillText("6th",130,405);
      context.fillText("7th",130,315);
      context.fillText("8th",130,225);
      context.fillText("9th",130,135);
      context.fillText("10th",125,50);
      context.stroke();
      context.drawImage(img, posX, posY, img.width/21, img.height/29);
   };

   floorFour.onclick = function() {
      if (!imgLoaded) return;
      posY = posY - snap4;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.moveTo(80,0);
      context.lineTo(80,1000);
      context.moveTo(50,0);
      context.lineTo(50,1000);
      context.moveTo(110,0);
      context.lineTo(110,1000);
      context.font = "20px Arial";
      context.fillText("G",130,940);
      context.fillText("1st",130,850);
      context.fillText("2nd",130,760);
      context.fillText("3rd",130,670);
      context.fillText("4th",130,580);
      context.fillText("5th",130,495);
      context.fillText("6th",130,405);
      context.fillText("7th",130,315);
      context.fillText("8th",130,225);
      context.fillText("9th",130,135);
      context.fillText("10th",125,50);
      context.stroke();
      context.drawImage(img, posX, posY, img.width/21, img.height/29);
   };

   floorThree.onclick = function() {
      if (!imgLoaded) return;
      posY = posY - snap3;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.moveTo(80,0);
      context.lineTo(80,1000);
      context.moveTo(50,0);
      context.lineTo(50,1000);
      context.moveTo(110,0);
      context.lineTo(110,1000);
      context.font = "20px Arial";
      context.fillText("G",130,940);
      context.fillText("1st",130,850);
      context.fillText("2nd",130,760);
      context.fillText("3rd",130,670);
      context.fillText("4th",130,580);
      context.fillText("5th",130,495);
      context.fillText("6th",130,405);
      context.fillText("7th",130,315);
      context.fillText("8th",130,225);
      context.fillText("9th",130,135);
      context.fillText("10th",125,50);
      context.stroke();
      context.drawImage(img, posX, posY, img.width/21, img.height/29);
   };

   floorTwo.onclick = function() {
      if (!imgLoaded) return;
      posY = posY - snap2;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.moveTo(80,0);
      context.lineTo(80,1000);
      context.moveTo(50,0);
      context.lineTo(50,1000);
      context.moveTo(110,0);
      context.lineTo(110,1000);
      context.font = "20px Arial";
      context.fillText("G",130,940);
      context.fillText("1st",130,850);
      context.fillText("2nd",130,760);
      context.fillText("3rd",130,670);
      context.fillText("4th",130,580);
      context.fillText("5th",130,495);
      context.fillText("6th",130,405);
      context.fillText("7th",130,315);
      context.fillText("8th",130,225);
      context.fillText("9th",130,135);
      context.fillText("10th",125,50);
      context.stroke();
      context.drawImage(img, posX, posY, img.width/21, img.height/29);
   };

   floorOne.onclick = function() {
      if (!imgLoaded) return;
      posY = posY - snap1;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.moveTo(80,0);
      context.lineTo(80,1000);
      context.moveTo(50,0);
      context.lineTo(50,1000);
      context.moveTo(110,0);
      context.lineTo(110,1000);
      context.font = "20px Arial";
      context.fillText("G",130,940);
      context.fillText("1st",130,850);
      context.fillText("2nd",130,760);
      context.fillText("3rd",130,670);
      context.fillText("4th",130,580);
      context.fillText("5th",130,495);
      context.fillText("6th",130,405);
      context.fillText("7th",130,315);
      context.fillText("8th",130,225);
      context.fillText("9th",130,135);
      context.fillText("10th",125,50);
      context.stroke();
      context.drawImage(img, posX, posY, img.width/21, img.height/29);
   };

   floorG.onclick = function() {
      if (!imgLoaded) return;
      //posY = posY + snapG;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.moveTo(80,0);
      context.lineTo(80,1000);
      context.moveTo(50,0);
      context.lineTo(50,1000);
      context.moveTo(110,0);
      context.lineTo(110,1000);
      context.font = "20px Arial";
      context.fillText("G",130,940);
      context.fillText("1st",130,850);
      context.fillText("2nd",130,760);
      context.fillText("3rd",130,670);
      context.fillText("4th",130,580);
      context.fillText("5th",130,495);
      context.fillText("6th",130,405);
      context.fillText("7th",130,315);
      context.fillText("8th",130,225);
      context.fillText("9th",130,135);
      context.fillText("10th",125,50);
      context.stroke();
      context.drawImage(img, posX, posY, img.width/21, img.height/29);
   };
}
.shadow1{
  box-shadow: 3px 7px 3px gray;
  transition: all .2s ease-in-out;

}
.shadow1:hover{
  transform: scale(1.05);
}


#main {
  background-color: gray;
}

/* Media query for Mobile devices*/

@media only screen and (min-width: 285px) and (max-width: 480px) {

}
/* Media Query for Tablets */

@media only screen and (min-width: 481px) and (max-width: 1024px) {

}
/* Desktops and laptops  */

@media only screen and (min-width: 1025px) {

}
<div class="row">
  <div class="col-sm-2 bg-primary">
    <h5>Advertisement</h5>
  </div>
  <div class="col-sm-10 bg-light">
    <h5 class="text-center mt-4">Floor Selection</h5>
    <div class="row pb-5 no-gutters" style="padding-left: 100px; padding-right: 100px;">
      <div class="col-sm-2 mt-2 text-center">
        <canvas id="main" width="200px" height="1000px"></canvas>
      </div>
      <div class="col-sm-8">
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorTen" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Home & Office Furniture</strong></h6></button>
          <a href="" id="" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"> <span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Home Appliances & Accessories</span></a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorNine" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Ready Food & Beverages</strong></h6></button>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorEight" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Toys & Gadgets Offices Stationaries & Accessories</strong></h6></button>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorSeven" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Halal Products & Goods</strong></h6></button>
          <a href="" id="floorSeven" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Retails Stores</span></a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorSix" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Electronics</strong></h6></button>
          <a href="" id="floorSix" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile & Tablets</a>
          <a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile Accessories</a>
          <a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Camera</a>
          <a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> IT Accessories Computers, Printer & Laptop</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorFive" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Sport Clothes Male & Accessories</strong></h6></button>
          <a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Swim Suit Male & Female</span></a>
          <a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Gym & Other Sports Equipments</span></a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorFour" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Jewelry & Accessories</strong></h6></button>
          <a href="" id="floorFour" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Jewelry</a>
          <a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Trinkets Jewelry</a>
          <a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Sun Glasses</a>
          <a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Watches</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorThree" class="text-dark btn btn-default" style="text-decoration: none;"> <h6><strong>Beauty</strong></h6></button>
          <a href="" id="floorThree" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Cosmetics</a>
          <a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Skin Care</a>
          <a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Hair Care</a>
          <a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Perfumes (Male & Female)</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorTwo" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Man Fashion</strong></h6></button>
          <a href="" id="floorTwo" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
          <a href="" id="floorTow" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
          <a href="" id="floorTwo" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Leather Items</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorOne" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Women Fashion</strong></h6></button>
          <a href="" id="floorOne" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
          <a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Lingeries</a>
          <a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorG" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Backyard</strong></h6></button>
        </div>
      </div>
      <div class="col-sm-2">People will be moving here</div>
    </div>
  </div>
</div>

html5-canvas css html javascript
1 Answers

First we should really try to clean your code a little bit as there's a lot of repetition which makes maintaining a bit hard.

You have eleven buttons which essentially all do the same thing once clicked:

  • update a single variable
  • redraw canvas

At the moment you manually attach all the above actions to each one of the buttons.

e.g.

var floorG = document.getElementById('floorG');
floorG.onclick = function() {
      if (!imgLoaded) return;
      //posY = posY + snapG;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.moveTo(80,0);
      context.lineTo(80,1000);
      context.moveTo(50,0);
      context.lineTo(50,1000);
      context.moveTo(110,0);
      context.lineTo(110,1000);
      context.font = "20px Arial";
      context.fillText("G",130,940);
      context.fillText("1st",130,850);
      context.fillText("2nd",130,760);
      context.fillText("3rd",130,670);
      context.fillText("4th",130,580);
      context.fillText("5th",130,495);
      context.fillText("6th",130,405);
      context.fillText("7th",130,315);
      context.fillText("8th",130,225);
      context.fillText("9th",130,135);
      context.fillText("10th",125,50);
      context.stroke();
      context.drawImage(img, posX, posY, img.width/21, img.height/29);
   };

So the above is repeated eleven times!

It would be better to wrap the functionality once inside a function and attach the same function to each button: To do this, let's create an array of objects, where each object holds the id to the button as well as a target position for the elevator.

var myButtons = [
    {id: "floorG",snap: 10},
    {id: "floorOne",snap: 90},
    {id: "floorTwo", snap: 185},
    {id: "floorThree", snap: 270},
    {id: "floorFour", snap: 360},
    {id: "floorFive", snap: 450},
    {id: "floorSix",snap: 540},
    {id: "floorSeven",snap: 620},
    {id: "floorEight", snap: 710},
    {id: "floorNine", snap: 800},
    {id: "floorTen", snap: 890}
];

Now we're able to simply loop over this array, grab an id plus the target position and create a click event listener for the appropriate button:

function buttonClick(e) {
  if (!imgLoaded) return;
  targY = e.currentTarget.snap;
}
var theButton;
for (var a = 0; a < myButtons.length; a++) {
  theButton = document.getElementById(myButtons[a].id);
  theButton.snap = myButtons[a].snap;
  theButton.onclick = buttonClick;
}

The actual movement of the elevator ain't that hard actually. We just need a function that constantly updates the canvas based on the target position for the elevator. Additionally it would be great if the elevator doesn't just move from a to b in a linear way - it should slow down as it approaches it's destination. This effect is called easing. Let's create another function updateCanvas()

function updateCanvas() {
  posY = ((posY - targY) * 0.9 + targY);

  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  context.moveTo(80, 0);
  context.lineTo(80, 1000);
  context.moveTo(50, 0);
  context.lineTo(50, 1000);
  context.moveTo(110, 0);
  context.lineTo(110, 1000);
  context.font = "20px Arial";
  context.fillText("G", 130, 940);
  context.fillText("1st", 130, 850);
  context.fillText("2nd", 130, 760);
  context.fillText("3rd", 130, 670);
  context.fillText("4th", 130, 580);
  context.fillText("5th", 130, 495);
  context.fillText("6th", 130, 405);
  context.fillText("7th", 130, 315);
  context.fillText("8th", 130, 225);
  context.fillText("9th", 130, 135);
  context.fillText("10th", 125, 50);
  context.stroke();
  context.drawImage(img, posX, posY + img.height / 2, img.width, img.height);
}

In the above code we're recalculating the elevator's position based on it's current position and the destination - targY.

posY = ((posY - targY) * 0.9 + targY)

The factor 0.9 controls the speed of the movement - which is as faster as it's getting closer to 1.

Now everything that's missing is some mechanism to call this function periodically. This is done by utilizing the setInterval() method. It calls a given function in a fixed interval.

Here's the complete example (Just click on 'Run code snippet'):

var context = document.getElementById('main').getContext("2d");

var myButtons = [
  {id: "floorG",snap: 10},
  {id: "floorOne",snap: 90},
  {id: "floorTwo", snap: 185},
  {id: "floorThree", snap: 270},
  {id: "floorFour", snap: 360},
  {id: "floorFive", snap: 450},
  {id: "floorSix",snap: 540},
  {id: "floorSeven",snap: 620},
  {id: "floorEight", snap: 710},
  {id: "floorNine", snap: 800},
  {id: "floorTen", snap: 890}
];

var posX = 48;
var posY = 905;
var targY = posY;

var imgLoaded = false;
var img = new Image();

img.onload = function() {
  imgLoaded = true;
  context.drawImage(img, posX, posY, img.width / 21, img.height / 29);
};
img.src = "http://via.placeholder.com/50x50";


function updateCanvas() {
  posY = ((posY - targY) * 0.9 + targY);

  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  context.beginPath();
  context.moveTo(80, 0);
  context.lineTo(80, 1000);
  context.moveTo(50, 0);
  context.lineTo(50, 1000);
  context.moveTo(110, 0);
  context.lineTo(110, 1000);
  context.font = "20px Arial";
  context.fillText("G", 130, 940);
  context.fillText("1st", 130, 850);
  context.fillText("2nd", 130, 760);
  context.fillText("3rd", 130, 670);
  context.fillText("4th", 130, 580);
  context.fillText("5th", 130, 495);
  context.fillText("6th", 130, 405);
  context.fillText("7th", 130, 315);
  context.fillText("8th", 130, 225);
  context.fillText("9th", 130, 135);
  context.fillText("10th", 125, 50);
  context.stroke();
  context.drawImage(img, posX, posY + img.height / 2, img.width, img.height);
}

function buttonClick(e) {
  if (!imgLoaded) return;
  targY = e.currentTarget.snap;
}
var theButton;
for (var a = 0; a < myButtons.length; a++) {
  theButton = document.getElementById(myButtons[a].id);
  theButton.snap = myButtons[a].snap;
  theButton.onclick = buttonClick;
}

var interval = setInterval(updateCanvas, 20);
.shadow1 {
  box-shadow: 3px 7px 3px gray;
  transition: all .2s ease-in-out;
}

.shadow1:hover {
  transform: scale(1.05);
}

#main {
  background-color: gray;
}


/* Media query for Mobile devices*/

@media only screen and (min-width: 285px) and (max-width: 480px) {}


/* Media Query for Tablets */

@media only screen and (min-width: 481px) and (max-width: 1024px) {}


/* Desktops and laptops  */

@media only screen and (min-width: 1025px) {}
<div class="row">
  <div class="col-sm-2 bg-primary">
    <h5>Advertisement</h5>
  </div>
  <div class="col-sm-10 bg-light">
    <h5 class="text-center mt-4">Floor Selection</h5>
    <div class="row pb-5 no-gutters" style="padding-left: 100px; padding-right: 100px;">
      <div class="col-sm-2 mt-2 text-center">
        <canvas id="main" width="200px" height="1000px"></canvas>
      </div>
      <div class="col-sm-8">
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorTen" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Home & Office Furniture</strong></h6></button>
          <a href="" id="" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"> <span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Home Appliances & Accessories</span></a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorNine" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Ready Food & Beverages</strong></h6></button>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorEight" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Toys & Gadgets Offices Stationaries & Accessories</strong></h6></button>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorSeven" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Halal Products & Goods</strong></h6></button>
          <a href="" id="floorSeven" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Retails Stores</span></a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorSix" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Electronics</strong></h6></button>
          <a href="" id="floorSix" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile & Tablets</a>
          <a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile Accessories</a>
          <a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Camera</a>
          <a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> IT Accessories Computers, Printer & Laptop</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorFive" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Sport Clothes Male & Accessories</strong></h6></button>
          <a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Swim Suit Male & Female</span></a>
          <a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Gym & Other Sports Equipments</span></a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorFour" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Jewelry & Accessories</strong></h6></button>
          <a href="" id="floorFour" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Jewelry</a>
          <a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Trinkets Jewelry</a>
          <a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Sun Glasses</a>
          <a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Watches</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorThree" class="text-dark btn btn-default" style="text-decoration: none;"> <h6><strong>Beauty</strong></h6></button>
          <a href="" id="floorThree" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Cosmetics</a>
          <a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Skin Care</a>
          <a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Hair Care</a>
          <a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Perfumes (Male & Female)</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorTwo" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Man Fashion</strong></h6></button>
          <a href="" id="floorTwo" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
          <a href="" id="floorTow" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
          <a href="" id="floorTwo" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Leather Items</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorOne" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Women Fashion</strong></h6></button>
          <a href="" id="floorOne" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
          <a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Lingeries</a>
          <a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorG" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Backyard</strong></h6></button>
        </div>
      </div>
      <div class="col-sm-2">People will be moving here</div>
    </div>
  </div>
</div>

Edit

As you asked in the comments - yes it's possible to change the colors during movement of the 'elevator'. I modifed my previous example to change the text color. To make this work we need to check the current vertical screen position of the elevator and compare it to the position of each text box. That means we need to group the textes and it's positions in another array as that makes things in the update loop a little easier.

var floors=[{name: "G",xPos: 130, yPos: 940},
{name: "1st",xPos: 130, yPos: 850},
{name: "2nd",xPos: 130, yPos: 760 },
{name: "3rd",xPos: 130, yPos: 670},
{name: "4th",xPos: 130, yPos: 580},
{name: "5th",xPos: 130, yPos: 495},
{name: "6th",xPos: 130, yPos: 405},
{name: "7th",xPos: 130, yPos: 315},
{name: "8th",xPos: 130, yPos: 225},
{name: "9th",xPos: 130, yPos: 135},
{name: "10th",xPos: 125, yPos: 50}
];

Now we can easily loop over this array, check if the elevator is within a certain range to one of the yPos positions above and in case it is, use a different textcolor. Additionally, if the elevator reached it's destination targY, we're clearing the interval and setting the textcolor to another color now because actually it isn't necessary to keep on redrawing the canvas if the elevator is standing still.

Here's the complete code:

var context = document.getElementById('main').getContext("2d");

var myButtons = [
  {id: "floorG",snap: 10},
  {id: "floorOne",snap: 90},
  {id: "floorTwo", snap: 185},
  {id: "floorThree", snap: 270},
  {id: "floorFour", snap: 360},
  {id: "floorFive", snap: 450},
  {id: "floorSix",snap: 540},
  {id: "floorSeven",snap: 620},
  {id: "floorEight", snap: 710},
  {id: "floorNine", snap: 800},
  {id: "floorTen", snap: 890}
];

var floors=[{name: "G",xPos: 130, yPos: 940},
{name: "1st",xPos: 130, yPos: 850},
{name: "2nd",xPos: 130, yPos: 760 },
{name: "3rd",xPos: 130, yPos: 670},
{name: "4th",xPos: 130, yPos: 580},
{name: "5th",xPos: 130, yPos: 495},
{name: "6th",xPos: 130, yPos: 405},
{name: "7th",xPos: 130, yPos: 315},
{name: "8th",xPos: 130, yPos: 225},
{name: "9th",xPos: 130, yPos: 135},
{name: "10th",xPos: 125, yPos: 50}
];
var posX = 48;
var posY = 905;
var targY = posY;
var interval;

var imgLoaded = false;
var img = new Image();

img.onload = function() {
  imgLoaded = true;
  context.drawImage(img, posX, posY, img.width / 21, img.height / 29);
};
img.src = "http://via.placeholder.com/50x50";


function updateCanvas() {
  posY = ((posY - targY) * 0.9 + targY);

  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  context.fillStyle = "black";
  context.beginPath();
  context.moveTo(80, 0);
  context.lineTo(80, 1000);
  context.moveTo(50, 0);
  context.lineTo(50, 1000);
  context.moveTo(110, 0);
  context.lineTo(110, 1000);
  context.font = "20px Arial";

  var floor;
  for (var a = 0; a < floors.length; a++) {
    floor = floors[a];

    if (Math.abs((posY + img.height / 2) - floor.yPos) < 30) {
      if (Math.abs(posY - targY) < 1) {
        context.fillStyle = "green";
        clearInterval(interval);
        interval = null;
      } else {
        context.fillStyle = "blue";
      }
    } else {
      context.fillStyle = "black";
    }
    context.fillText(floor.name, floor.xPos, floor.yPos);
  }

  context.stroke();
  context.drawImage(img, posX, posY + img.height / 2, img.width, img.height);
}

function buttonClick(e) {
  if (!imgLoaded) return;
  targY = e.currentTarget.snap;
  if(interval==null)
  {
    interval = setInterval(updateCanvas, 20);
  }
}
var theButton;
for (var a = 0; a < myButtons.length; a++) {
  theButton = document.getElementById(myButtons[a].id);
  theButton.snap = myButtons[a].snap;
  theButton.onclick = buttonClick;
}

interval = setInterval(updateCanvas, 20);
.shadow1 {
  box-shadow: 3px 7px 3px gray;
  transition: all .2s ease-in-out;
}

.shadow1:hover {
  transform: scale(1.05);
}

#main {
  background-color: gray;
}


/* Media query for Mobile devices*/

@media only screen and (min-width: 285px) and (max-width: 480px) {}


/* Media Query for Tablets */

@media only screen and (min-width: 481px) and (max-width: 1024px) {}


/* Desktops and laptops  */

@media only screen and (min-width: 1025px) {}
<div class="row">
  <div class="col-sm-2 bg-primary">
    <h5>Advertisement</h5>
  </div>
  <div class="col-sm-10 bg-light">
    <h5 class="text-center mt-4">Floor Selection</h5>
    <div class="row pb-5 no-gutters" style="padding-left: 100px; padding-right: 100px;">
      <div class="col-sm-2 mt-2 text-center">
        <canvas id="main" width="200px" height="1000px"></canvas>
      </div>
      <div class="col-sm-8">
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorTen" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Home & Office Furniture</strong></h6></button>
          <a href="" id="" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"> <span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Home Appliances & Accessories</span></a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorNine" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Ready Food & Beverages</strong></h6></button>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorEight" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Toys & Gadgets Offices Stationaries & Accessories</strong></h6></button>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorSeven" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Halal Products & Goods</strong></h6></button>
          <a href="" id="floorSeven" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Retails Stores</span></a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorSix" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Electronics</strong></h6></button>
          <a href="" id="floorSix" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile & Tablets</a>
          <a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile Accessories</a>
          <a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Camera</a>
          <a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> IT Accessories Computers, Printer & Laptop</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorFive" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Sport Clothes Male & Accessories</strong></h6></button>
          <a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Swim Suit Male & Female</span></a>
          <a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Gym & Other Sports Equipments</span></a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorFour" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Jewelry & Accessories</strong></h6></button>
          <a href="" id="floorFour" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Jewelry</a>
          <a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Trinkets Jewelry</a>
          <a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Sun Glasses</a>
          <a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Watches</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorThree" class="text-dark btn btn-default" style="text-decoration: none;"> <h6><strong>Beauty</strong></h6></button>
          <a href="" id="floorThree" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Cosmetics</a>
          <a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Skin Care</a>
          <a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Hair Care</a>
          <a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Perfumes (Male & Female)</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorTwo" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Man Fashion</strong></h6></button>
          <a href="" id="floorTwo" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
          <a href="" id="floorTow" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
          <a href="" id="floorTwo" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Leather Items</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorOne" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Women Fashion</strong></h6></button>
          <a href="" id="floorOne" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
          <a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Lingeries</a>
          <a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
        </div>
        <div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
          <button id="floorG" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Backyard</strong></h6></button>
        </div>
      </div>
      <div class="col-sm-2">People will be moving here</div>
    </div>
  </div>
</div>

user_65046330
Related