title: How to make images smaller in javascript?
body: <p>I'm making a game slot and created images in illustrator but when I transferred them to javascript they are really big. Is there anyway to make them small in javascript or do I have to create them again and make them smaller?</p>
  
  <p>Here is my code:</p>
  
  <pre><code> window.onload = function() {
  
  
          //global variables
          var credit=0;
          var betAmount=0;
          var THREE_DIAMONDS="";
          var TWO_DIAMONDS="";
          var ONE_DIAMOND="";
          var SAME_BOTH="";
          var SAME_COLOR="";
          var SAME_SHAPE="";
  
  
          var redSquare={shape:"square", color:"red", width:100, height:100, image:"images/apple.png"};
          var blueCircle={shape:"circle", color:"blue", width:100, height:100,image:"images/apple2.png"};
          var blueSquare={shape:"square", color:"blue", width:100, height:100,image:"images/apple3.png"};
          var blueTriangle={shape:"triangle", color:"blue", width:100, height:100,image:"images/cherry.png"};
          var greenCircle={shape:"circle", color:"green",width:100, height:100, image:"images/cherry2.png"};
          var greenSquare={shape:"square", color:"green", width:100, height:100,image:"images/cherry3.png"};
          var greenTriangle={shape:"triangle", color:"green", width:100, height:100,image:"images/watermelon.png"};
          var redCircle={shape:"circle", color:"red", width:100, height:100,image:"images/watermelon2.png"};
          var redTriangle={shape:"triangle", color:"red", width:100, height:100,image:"images/watermelon3.png"};
          var yellowDiamond={shape:"diamond", color:"yellow", width:100, height:100,image:"images/passion.png"};
          var blackSquare={shape:"square", color:"black", width:100, height:100,image:"images/blackSquare.png" };
  
          var slotShapes= [blackSquare, redSquare, redTriangle, redCircle, greenSquare, greenTriangle, greenCircle, blueSquare, blueTriangle, blueCircle, yellowDiamond]
  
  
          //attaches event to the drop down!
  
          document.getElementById("theList").onchange = function() {
  
              credit = parseInt(document.getElementById("theList").value);
  
              document.getElementById("credits").value= credit;  
  
              document.getElementById("theList").disabled = true;
  
              document.getElementById("theList").value = 0;
  
              document.getElementById("clickMe").disabled = false;
  
              document.getElementById("img1").src = slotShapes[Math.floor(Math.random()*9)+1].image;
              document.getElementById("img2").src = slotShapes[Math.floor(Math.random()*9)+1].image;
              document.getElementById("img3").src = slotShapes[Math.floor(Math.random()*9)+1].image;
  
              document.getElementById("output").innerHTML = "Good luck!!!";
  
  
          }
  
          var threePics=[];
  
          document.getElementById("clickMe").onclick = function() {
  
              if (document.getElementById("bet1").checked === true){
                  betAmount="1";
              } else if (document.getElementById("bet2").checked === true){
                  betAmount="2";
              } else if (document.getElementById("bet3").checked === true){
                  betAmount="3";
              }
  
              credit = credit - betAmount;
  
              document.getElementById("credits").value= credit;
  
              for(i = 0; i &lt; 3; i++){
                  var random = Math.floor(Math.random()*19)+1;
  
                  switch (random)
                  {
                      case 1:
                      case 2:
                          document.getElementById("img" + (i+1)).src = slotShapes[1].image; 
                          threePics[i]= slotShapes[1];
                          break;
                      case 3:
                      case 4:
                          document.getElementById("img" + (i+1)).src = slotShapes[2].image;
                          threePics[i]= slotShapes[2];
                          break;
                      case 5:
                      case 6:
                          document.getElementById("img" + (i+1)).src = slotShapes[3].image;
                          threePics[i]= slotShapes[3];
                          break;
                      case 7:
                      case 8:
                          document.getElementById("img" + (i+1)).src = slotShapes[4].image;
                          threePics[i]= slotShapes[4];
                          break;
                      case 9:
                      case 10:
                          document.getElementById("img" + (i+1)).src = slotShapes[5].image;
                          threePics[i]= slotShapes[5];
                          break;
                      case 11:
                      case 12:
                          document.getElementById("img" + (i+1)).src = slotShapes[6].image;
                          threePics[i]= slotShapes[6];
                          break;
                      case 13:
                      case 14:
                          document.getElementById("img" + (i+1)).src = slotShapes[7].image;
                          threePics[i]= slotShapes[7];
                          break;
                      case 15:
                      case 16:
                          document.getElementById("img" + (i+1)).src = slotShapes[8].image;
                          threePics[i]= slotShapes[8];
                          break;
                      case 17:
                      case 18:
                          document.getElementById("img" + (i+1)).src = slotShapes[9].image;
                          threePics[i]= slotShapes[9];
                          break;
                      case 19:
                          document.getElementById("img" + (i+1)).src = slotShapes[10].image;
                          threePics[i]= slotShapes[10];
                          break;
  
                      default:
                          break;
                  }
              }
  
              if (threePics[0].color === "yellow" &amp;&amp; threePics[1].color === "yellow" &amp;&amp; threePics[2].color === "yellow"){
  
                  //jackpot
  
  
                  } else if (threePics[0].color === "yellow" &amp;&amp; threePics[1] === "yellow" ||
                             threePics[0].color === "yellow" &amp;&amp; threePics[2] === "yellow" ||
                             threePics[1].color === "yellow" &amp;&amp; threePics[2] === "yellow") {
  
                      document.getElementById("output").innerHTML = "NICE!!! Two diamonds pay " + (TWO_DIAMONDS * betAmount) + " on a bet of " + betAmount;
  
                  } else if (threePics[0].color === "yellow" || threePics[1].color === "yellow" || threePics[2].color === "yellow") {
                      credit = credit + (ONE_DIAMOND * betAmount);
  
                  } else if (threePics[0].shape === threePics[1].shape &amp;&amp; threePics[0].shape === threePics[2].shape &amp;&amp;
                             threePics[0].color === threePics[1].color &amp;&amp; threePics[0].color === threePics[2].color) {
  
                      document.getElementById("output").innerHTML = "Same shape and color pays " + (SAME_BOTH * betAmount) + " on a bet of " + betAmount;
                      credit = credit + (SAME_SHAPE * betAmount);
  
                  } 
              else if (threePics[0].shape === threePics[1].shape &amp;&amp; threePics[0].shape === threePics[2].shape) {
  
                        document.getElementById("output").innerHTML = "Same shape pays " + (SAME_SHAPE * betAmount) + " on a bet of " + betAmount;
                      credit = credit + (SAME_SHAPE * betAmount);
  
                  } else if (threePics[0].color === threePics[1].color &amp;&amp; threePics[0].color === threePics[2].color) {
  
                       document.getElementById("output").innerHTML = "Same color pays " + (SAME_COLOR * betAmount) + " on a bet of " + betAmount;
                      credit = credit + (SAME_COLOR * betAmount);
                  }
                  else {
                      document.getElementById("output").innerHTML = "Too bad. Loss of " + betAmount;
                  }
  
  
  
          }
      }
  </code></pre>