kasper.space / canvas-experiments
[READ-ONLY] Mirror of https://github.com/probablykasper/canvas-experiments. Just me learning to use HTML canvas canvas-experiments.kasper.space
canvas html5-canvas website
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

w3schools tut

KH (Jun 13, 2017, 10:44 PM +0200) 7ef482da a3d7ea52

+35 -4
+3 -1
css/home.css
··· 1 - canvas { border: 1px solid #BFADDF; } 1 + section { position: absolute; width: 100%; height: 100%; } 2 + 3 + section canvas { position: relative; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 300px; height: 150px; border: 1px solid #BFADDF; }
+12 -2
css/home.sass
··· 1 - canvas 2 - border: 1px solid #BFADDF 1 + section 2 + position: absolute 3 + width: 100% 4 + height: 100% 5 + canvas 6 + position: relative 7 + transform: translate(-50%, -50%) 8 + top: 50% 9 + left: 50% 10 + width: 300px 11 + height: 150px 12 + border: 1px solid #BFADDF
+4 -1
index.php
··· 11 11 </head> 12 12 13 13 <body> 14 - <canvas width="200px" height="100px"></canvas> 14 + <section class="main"> 15 + <canvas id="canvas"></canvas> 16 + </section> 15 17 <!--jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 16 18 <!--js.cookie--> <script src="/js/js.cookie-2.1.4.min.js"></script> 19 + <script src="js/home.js"></script> 17 20 </body> 18 21 </html>
+16
js/home.js
··· 1 + var c = document.getElementById("canvas"); 2 + var ch = c.clientHeight; 3 + var cw = c.clientWidth; 4 + var pi = Math.PI; 5 + var ctx = c.getContext("2d"); 6 + 7 + // Line 8 + ctx.moveTo(0,0); 9 + ctx.lineTo(cw,ch); 10 + ctx.stroke(); 11 + 12 + // Circliboi 13 + ctx.beginPath(); 14 + // arc(anchor X, anchor Y, radius, line start point, line end point) 15 + ctx.arc(cw/2, ch/2, ch/2, pi, 2*pi); 16 + ctx.stroke();