title: How to make my logo JS animation scale like image logo on website?
body: <p>I spent a bunch of time creating this really cool Logo animation our my site! The logo animation i made is the same size as the logo image and I can apply it to the site easily. </p>
  
  <p><strong>The problem</strong> is the logo on my site is set to start scaling down once the screen width reaches a certain point.  It's set with a max width but also set to scale to the size of its parent div. My animation does not do this... I realized I need to figure this out before applying my logo animation to my site. Since it does not act in the same way... And i really dont wana use css scaling and media queries because that would be a mess.</p>
  
  <p>Here my animation.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Create an array to store our particles
  var particles = [];
  
  // The amount of particles to render
  var particleCount = 10;
  
  // The maximum velocity in each direction
  var maxVelocity = 3;
  
  // The target frames per second (how often do we want to update / redraw the scene)
  var targetFPS = 33;
  
  // Set the dimensions of the canvas as variables so they can be used.
  var canvasWidth = 400;
  var canvasHeight = 400;
  
  // Create an image object (only need one instance)
  var imageObj = new Image();
  
  // Once the image has been downloaded then set the image on all of the particles
  imageObj.onload = function() {
      particles.forEach(function(particle) {
              particle.setImage(imageObj);
      });
  };
  
  // Once the callback is arranged then set the source of the image
  imageObj.src = "http://www.freeiconspng.com/uploads/misc-cloud-smoke-element-png-by-dbszabo1-on-deviantart-19.png";
  
  // A function to create a particle object.
  function Particle(context) {
  
      // Set the initial x and y positions
      this.x = 0;
      this.y = 0;
  
      // Set the initial velocity
      this.xVelocity = 0;
      this.yVelocity = 0;
  
      // Set the radius
      this.radius = 5;
  
      // Store the context which will be used to draw the particle
      this.context = context;
  
      // The function to draw the particle on the canvas.
      this.draw = function() {
          
          // If an image is set draw it
          if(this.image){
              this.context.drawImage(this.image, this.x-228, this.y-228);         
              // If the image is being rendered do not draw the circle so break out of the draw function                
              return;
          }
          // Draw the circle as before, with the addition of using the position and the radius from this object.
      };
  
      // Update the particle.
      this.update = function() {
          // Update the position of the particle with the addition of the velocity.
          this.x += this.xVelocity;
          this.y += this.yVelocity;
  
          // Check if has crossed the right edge
          if (this.x &gt;= canvasWidth) {
              this.xVelocity = -this.xVelocity;
              this.x = canvasWidth;
          }
          // Check if has crossed the left edge
          else if (this.x &lt;= 0) {
              this.xVelocity = -this.xVelocity;
              this.x = 0;
          }
  
          // Check if has crossed the bottom edge
          if (this.y &gt;= canvasHeight) {
              this.yVelocity = -this.yVelocity;
              this.y = canvasHeight;
          }
          
          // Check if has crossed the top edge
          else if (this.y &lt;= 0) {
              this.yVelocity = -this.yVelocity;
              this.y = 0;
          }
      };
  
      // A function to set the position of the particle.
      this.setPosition = function(x, y) {
          this.x = x;
          this.y = y;
      };
  
      // Function to set the velocity.
      this.setVelocity = function(x, y) {
          this.xVelocity = x;
          this.yVelocity = y;
      };
      
      this.setImage = function(image){
          this.image = image;
      }
  }
  
  // A function to generate a random number between 2 values
  function generateRandom(min, max){
      return Math.random() * (max - min) + min;
  }
  
  // The canvas context if it is defined.
  var context;
  
  // Initialise the scene and set the context if possible
  function init() {
      var canvas = document.getElementById('myCanvas');
      if (canvas.getContext) {
  
          // Set the context variable so it can be re-used
          context = canvas.getContext('2d');
  
          // Create the particles and set their initial positions and velocities
          for(var i=0; i &lt; particleCount; ++i){
              var particle = new Particle(context);
              
              // Set the position to be inside the canvas bounds
              particle.setPosition(generateRandom(0, canvasWidth), generateRandom(0, canvasHeight));
              
              // Set the initial velocity to be either random and either negative or positive
              particle.setVelocity(generateRandom(-maxVelocity, maxVelocity), generateRandom(-maxVelocity, maxVelocity));
              particles.push(particle);            
          }
      }
      else {
          alert("Please use a modern browser");
      }
  }
  
  // The function to draw the scene
  function draw() {
      // Clear the drawing surface and fill it with a black background
      //context.fillStyle = "rgba(0, 0, 0, 0.5)";
      //context.fillRect(0, 0, 400, 400);
      context.clearRect(0,0,1014,611);
      // Go through all of the particles and draw them.
      particles.forEach(function(particle) {
          particle.draw();
      });
  }
  
  // Update the scene
  function update() {
      particles.forEach(function(particle) {
          particle.update();
      });
  }
  
  // Initialize the scene
  init();
  
  // If the context is set then we can draw the scene (if not then the browser does not support canvas)
  if (context) {
      setInterval(function() {
          // Update the scene befoe drawing
          update();
  
          // Draw the scene
          draw();
      }, 1000 / targetFPS);
  }
  
  
  
  var deg = [0, 0, 0, 0];
  
  rotate = function() {
    for (var i = 0; i &lt; 3; ++i) {
      deg[i] += 180 * 3;
      if (Math.random() &gt; 8)
        deg[i] += 180;
      $('#flip' + i).css({
        '-webkit-transform': 'rotateY(' + deg[i] + 'deg)',
        '-o-transform': 'rotateY(' + deg[i] + 'deg)',
        'transform': 'rotateY(' + deg[i] + 'deg)'
      });
    }
  };
  
  rotate();
  setInterval(rotate, 8000);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.animateVSS{
    width:282px;
    height:283px;
    position:relative;
    margin-top:20px;
    margin-left:100px;
  }
  .vsslogocover{
    position:absolute;
    z-index:2;
  }
  
  .blackdrop{
    position:relative;
    top:-189px;
    margin-left:44px;
    opacity:0;
  }
  
  #myCanvas{
    position:relative;
      background:black;
      position:absolute;
      z-index;4;
      margin-top:-190px;
      margin-left:-190px;
      border-radius:100%;
  }
  
  .coin {
    background-image: url("http://portalpacific.net/jsfid/vss-animated-front-logo1.png");
    background-size: 100% 100%;
    border-radius: 100%;
    height: 182px;
    position: relative;
    width:185px;
    -webkit-transition: 1.8s ease-in-out;
    -o-transition: 1.8s ease-in-out;
    transition: 1.8s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    margin-top:50px;
    margin-left:48px;
    z-index:1;
    background-color: black;
  }
  
  .coin:before {
    background-color: black;
    background-image: url("http://portalpacific.net/jsfid/vss22-animated-back-logo-185x1821.png");
    background-size: 100% 100%;
    content: '';
    height: 182px;
    left: 0;
    position: absolute;
    top: 0;
    width: 185px;
    margin-top:1px;
    -webkit-transform: translateZ(-5px);
    -o-transform: translateZ(-5px);
    transform: translateZ(-5px);
    border-radius:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="animateVSS"&gt;
  &lt;img class="vsslogocover" src="http://portalpacific.net/jsfid/VSS%20Bazooka%20Logo%20animation%20cover%20logo%20border.png" alt="Smiley face" width="282" height="283"&gt;
  &lt;span id="flip0" class="coin" style="display:inline-block;"&gt;&lt;/span&gt;
  &lt;img class="blackdrop" src="http://portalpacific.net/jsfid/bg2.png" alt="Smiley face" width="192" height="192"&gt;
  &lt;canvas id="myCanvas" width="200" height="200"&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's a <a href="http://fiddle.jshell.net/6gdrQ/18/" rel="nofollow noreferrer">JSFiddle</a> also.</p>
  
  <p>Thanks for any help!</p>