stage 5

jacekkopecky · jacekkopecky · commit d84ce2be3bd6 · 2020-03-26T16:56:31.000Z
diff --git a/stages/index.js b/stages/index.js
@@ -1,12 +1,12 @@
 'use strict';
 /**
- * We use the `class` keyword to define a class
- * before we create instances of it (objects).
+ * Objects can contain methods.
  *
- * We define the `Rectangle` class and create two
- * instances of it.
+ * Here, we move the `drawRect` function into the class
+ * definition as a `draw` method.
  *
- * They are then drawn as before.
+ * Methods have access to instance
+ * properties by using `this`.
  */
 
 class Rectangle {
@@ -17,20 +17,19 @@ class Rectangle {
     this.height = height;
     this.col = col;
   }
+
+  draw(ctx) {
+    ctx.fillStyle = this.col;
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+  }
 }
 
 // create the two rectangle objects
 const rect1 = new Rectangle(100, 50, 100, 200, 'crimson');
 const rect2 = new Rectangle(300, 150, 100, 200, 'steelblue');
 
-// draw a rectangle
-function drawRect(c, r) {
-  c.fillStyle = r.col;
-  c.fillRect(r.x, r.y, r.width, r.height);
-}
-
 // get a handle on the drawing canvas
 const ctx = document.querySelector('canvas').getContext('2d');
 
-drawRect(ctx, rect1);
-drawRect(ctx, rect2);
+rect1.draw(ctx);
+rect2.draw(ctx);
