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

Question

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

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) {

}


  
    Advertisement
  
  
    Floor Selection
    
      
        
      
      
        
          
           | Home Appliances & Accessories
        
        
          
        
        
          
        
        
          
          | Retails Stores
        
        
          
           Mobile & Tablets
           Mobile Accessories
           Camera
           IT Accessories Computers, Printer & Laptop
        
        
          
          | Swim Suit Male & Female
          | Gym & Other Sports Equipments
        
        
          
           Jewelry
           Trinkets Jewelry
           Sun Glasses
           Watches
        
        
          
           Cosmetics
           Skin Care
           Hair Care
           Perfumes (Male & Female)
        
        
          
           Clothes
           Shoes & Bags
           Leather Items
        
        
          
           Clothes
           Lingeries
           Shoes & Bags
        
        
          
        
      
      People will be moving here

obscure · Accepted Answer

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) {}


  
    Advertisement
  
  
    Floor Selection
    
      
        
      
      
        
          
           | Home Appliances & Accessories
        
        
          
        
        
          
        
        
          
          | Retails Stores
        
        
          
           Mobile & Tablets
           Mobile Accessories
           Camera
           IT Accessories Computers, Printer & Laptop
        
        
          
          | Swim Suit Male & Female
          | Gym & Other Sports Equipments
        
        
          
           Jewelry
           Trinkets Jewelry
           Sun Glasses
           Watches
        
        
          
           Cosmetics
           Skin Care
           Hair Care
           Perfumes (Male & Female)
        
        
          
           Clothes
           Shoes & Bags
           Leather Items
        
        
          
           Clothes
           Lingeries
           Shoes & Bags
        
        
          
        
      
      People will be moving here

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) {}


  
    Advertisement
  
  
    Floor Selection
    
      
        
      
      
        
          
           | Home Appliances & Accessories
        
        
          
        
        
          
        
        
          
          | Retails Stores
        
        
          
           Mobile & Tablets
           Mobile Accessories
           Camera
           IT Accessories Computers, Printer & Laptop
        
        
          
          | Swim Suit Male & Female
          | Gym & Other Sports Equipments
        
        
          
           Jewelry
           Trinkets Jewelry
           Sun Glasses
           Watches
        
        
          
           Cosmetics
           Skin Care
           Hair Care
           Perfumes (Male & Female)
        
        
          
           Clothes
           Shoes & Bags
           Leather Items
        
        
          
           Clothes
           Lingeries
           Shoes & Bags
        
        
          
        
      
      People will be moving here

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

Answers (1)

Edit

Related Questions