title: How to create canvas class with JavaScript ES6?
body: <p>I want to create a circle using canvas technology, but to do that I want to make use of ES6 features, and try to make an engine like just drawing and updating stuff with Classes.</p>
  
  <p>I'm having a hard time to draw the circle or know how to go about using Classes. I know how to do it in functional programming, but here I'm not sure how that should be achieved.</p>
  
  <p>I have created somewhat a blueprint, but its far from working I believe.</p>
  
  <p>What can I do to display a circle anywhere on the screen, using Classes for Canvas and the Ufo(circle).</p>
  
  <p>Here is the codepen: <a href="https://codepen.io/Aurelian/pen/mGWVbq?editors=1010" rel="nofollow noreferrer">https://codepen.io/Aurelian/pen/mGWVbq?editors=1010</a></p>
  
  <p>Here is the JS:</p>
  
  <pre><code>   /*
      * ------------------------------------------
      * *-----------------------------
      *  Canvas
      * *-----------------------------
      * ------------------------------------------
      */      
        // Set
        // Draw
        // Update
        // Animate
     class Canvas {
        constructor(height, width) {
           this.canvas = document.querySelector('canvas');
             this.c = canvas.getContext('2d');
             canvas.width = window.innerWidth;
             canvas.height = window.innerHeight;
        }
     }
  
     Canvas.prototype.draw = function() {
  
     }
  
     Canvas.prototype.animate = function() {
        requestAnimationFrame(animate);
        new Ufo()
     }
  
  
  
  
     /*
      * ------------------------------------------
      * *-----------------------------
      *  UFO
      * *-----------------------------
      * ------------------------------------------
      */
     class Ufo {
        constructor(x, y, velocity) {
           this.x = x,
           this.y = y,
           this.velocity = {
              x: 3,
              y: 3
           }
        }
     }
  
     Ufo.prototype.draw = function() {
        c.save()
        c.beginPath()
        c.arc(this.x, this.x, 50, 0, Math.PI * 2, false)
        c.fillStyle = red;
        c.fill()
        c.closePath()
        c.restore()
     }
  
     Ufo.prototype.update = function() {
        Ufo.draw() 
     }
  
   new Canvas(animate)
  </code></pre>