From 604fc5861142de2ff864649efa62de6a865805fc Mon Sep 17 00:00:00 2001
From: Snapster02 <alabson.inc@gmail.com>
Date: Thu, 22 Oct 2020 00:37:55 +0100
Subject: [PATCH] Created a simple animation using HTML5 canvas API

---
 index.html       |  6 +++++-
 scripts/index.js | 22 ++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 scripts/index.js

diff --git a/index.html b/index.html
index b49646e..ffbcb1f 100644
--- a/index.html
+++ b/index.html
@@ -27,9 +27,13 @@ <h1>To-Do</h1>
  
 
     </ul>
+    
 
+    <div id="container">
+        <canvas id="canvas" width="400" height="400"></canvas> 
+    </div>           
 
-
+    <script src="./scripts/index.js" async defer></script>
   </body>
 
 </html>
diff --git a/scripts/index.js b/scripts/index.js
new file mode 100644
index 0000000..7552523
--- /dev/null
+++ b/scripts/index.js
@@ -0,0 +1,22 @@
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const charTimer = null;
+const mario = { img: null, x: 0, y: 0, width: 28, height:42, currentframe: 0, totalframes: 6 }
+
+mario.img = new Image();
+mario.img.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/160783/mario.png";
+
+mario.img.onload = function(){
+  charTimer = setInterval(animateChar, 120);
+}
+
+function animateChar(){
+  mario.currentframe++;
+  
+  ctx.drawImage(mario.img, mario.currentframe*mario.width, 0, mario.width, mario.height, 0, 0, mario.width, mario.height);
+  
+  
+  if(mario.currentframe >= mario.totalframes){
+    mario.currentframe = 0;
+  }
+}
\ No newline at end of file