title: Can img tag show rezised image realtime from canvas image generated randomly by variable?
body: <p>I am a newbie. I have a canvas which show a image from array by a button, another div/img tag will show that image with smaller size. When that button is pressed, image canvas change and image at div/img tag change too. What should I do? </p>
  
  <p>Here is the code:</p>
  
  <pre><code>HTML:
  &lt;canvas id="canvas"&gt;&lt;/canvas&gt;&lt;!--600x800--&gt;
  &lt;input type="button" id="changeimg" value= "Change" onclick="ChangeImg();"&gt;&lt;/input&gt;
  &lt;img src="imgs/1.jpg" height="230" width="300"&gt;&lt;/img&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var vCanvas;
  var vStage;
  vImg = new Image();
  function init(){
      vImg.addEventListener('load',onImage,false);
      vImg.src = "imgs/1.jpg";
  }
  function onImage(e){
      setCanvas();
  }
  function setCanvas(){
      vCanvas = document.getElementById('canvas');
      vStage = vCanvas.getContext('2d');
      vStage.drawImage(vImg, 0, 0, 800, 600, 0, 0, 800, 600);
  }
  function ChangeImg(){
      var Imgrs= new Array("imgs/1.jpg", "imgs/2.jpg", "imgs/3.jpg");
          vImg.src = Imgrs[Math.floor(Math.random() * Imgrs.length)];
  }
  </code></pre>