Browse Source

added canvas starter

Bachir Soussi Chiadmi 5 months ago
parent
commit
3f3c7d29b0
3 changed files with 57 additions and 0 deletions
  1. 16 0
      canvas/assets/css/styles.css
  2. 24 0
      canvas/assets/js/main.js
  3. 17 0
      canvas/index.html

+ 16 - 0
canvas/assets/css/styles.css

@@ -0,0 +1,16 @@
+body{
+  background-color: black;
+}
+
+#root{
+  width:800px;
+  margin: 0 auto;
+}
+canvas{
+  display: block;
+  position:relative;
+  background-color: white;
+}
+a{
+  color: white;
+}

+ 24 - 0
canvas/assets/js/main.js

@@ -0,0 +1,24 @@
+console.log("hello");
+
+var canvas = document.getElementById('scene');
+var ctx = canvas.getContext('2d');
+
+var x = 10;
+var y = 10;
+
+var speed = 5;
+
+ctx.fillStyle = 'rgb(200, 0, 0)';
+
+function animate(){
+  ctx.clearRect(0,0,800,600);
+
+  x += speed;
+  y += speed;
+
+  ctx.fillRect(x, y, 30, 30);
+
+  window.requestAnimationFrame(animate);
+}
+
+animate();

+ 17 - 0
canvas/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Canvas drawing</title>
+    <link rel="stylesheet" href="assets/css/styles.css">
+  </head>
+  <body>
+    <div id="root">
+
+      <canvas id="scene" width="800" height="600"></canvas>
+      <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial</a>
+
+    </div>
+    <script src="assets/js/main.js" charset="utf-8"></script>
+  </body>
+</html>