HTML canvas

Author: seriouscoderone

apps/scratch-clone/pages/index.tsx

@@ -8,9 +8,37 @@ export function Index() {
    */
   return (
     <div className={styles.page}>
-     SCRATCH CLONE
+
+      <canvas id="myCanvas" width="300" height="300" style={{ border: "1px solid #000000" }}>
+      </canvas>
+
+      <img src='/apple.png' alt="apple" height={50} />
+
+      <img src='/cat.png' alt="apple" height={50} />
+
+      <button onClick={drawHouse}>DRAW HOUSE</button>
     </div>
   );
 }
 
+function drawHouse() {
+  const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
+  const ctx = canvas.getContext('2d');
+  ctx.lineWidth = 10;
+
+  // Wall
+  ctx.strokeRect(75, 140, 150, 110);
+
+  // Door
+  ctx.fillRect(130, 190, 40, 60);
+
+  // Roof
+  ctx.beginPath();
+  ctx.moveTo(50, 140);
+  ctx.lineTo(150, 60);
+  ctx.lineTo(250, 140);
+  ctx.closePath();
+  ctx.stroke();
+}
+
 export default Index;

apps/scratch-clone/public/apple.png

@@ -10,8 +10,16 @@ export default class Scratch {
   changeXBy(value) {
     this.x = this.x + value
   }
+  changeyBy(value) {
+    this.y = this.y + value
+  }
   whenGreenFlagClicked() {
-    this.setXTo(100)
-    this.setYTo(50)
+    this.setXTo(-215)
+    this.setYTo(163)
+    // eslint-disable-next-line no-constant-condition
+    while(true) {
+      this.changeXBy(1)
+      this.changeyBy(-1)
+    }
   }
 }