avec des images (clement)

oop/script.js

@@ -38,15 +38,27 @@ class Boule {
       s:50,
       l:50
     }
+    this.img = new Image();
+    this.img.src = "images/clement.png";
+
   }
 
   draw(){
     // console.log('draw', this);
-    ctx.beginPath();
-    ctx.fillStyle = `hsl(${this.color.h},${this.color.s}%,${this.color.l}%)`;
-    ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
-    // ctx.fillRect(300, 300, 100, 100);
-    ctx.fill();
+    // ctx.beginPath();
+    // ctx.fillStyle = `hsl(${this.color.h},${this.color.s}%,${this.color.l}%)`;
+    // ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
+    // // ctx.fillRect(300, 300, 100, 100);
+    // ctx.fill();
+    // ctx.closePath();
+
+    // this.img.onload = () => {
+    //   // console.log('img, x, y', this.img, this.pos.x, this.pos.y);
+      ctx.drawImage(this.img, this.pos.x, this.pos.y, 3*this.size, 5*this.size);
+    // }
+    
+    
+
   }
 
   move(){
@@ -73,7 +85,7 @@ function createBoule(){
   maboule = new Boule(
     canvas.width / 2, // Math.random()*canvas.width, 
     canvas.height / 2, // Math.random()*canvas.height,
-    2+Math.random()*10
+    10+Math.random()*30
   );
   maboule.draw();
   boules.push(maboule);