commit bbbbf55d6d9ddaf5fed05a941fe82af3e68f4e4d Author: emil Date: Sun Oct 13 10:13:33 2024 +0300 Initial Commit diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..016331c --- /dev/null +++ b/css/styles.css @@ -0,0 +1,15 @@ +.body { + background-color: cornflowerblue; +} + +.canvas { + display: block; + width: 100%; + height: 100%; + background-color: cadetblue; + border: 1px solid cyan; +} +.canvas-title { + text-align: center; + margin: auto; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..567f286 --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + + Canvas Test + + + +

Doodle drawer

+ + + + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..0076da2 --- /dev/null +++ b/js/main.js @@ -0,0 +1,17 @@ +var canvas = document.getElementById("myCanvas"); +var ctx = canvas.getContext("2d"); + +var count = 0; +setInterval(function () { + var arg1 = document.getElementById("arg1").value; + var arg2 = document.getElementById("arg2").value; + var freq = document.getElementById("freq").value; + var size = document.getElementById("size").value; + count++; + ctx.fillRect( + 250 + 100 * Math.sin(count) + Math.cos(count * arg1) * 100, + 250 + 100 * Math.cos(count) + Math.cos(count * arg2) * 100, + size * Math.sin(count ** freq), + size * Math.sin(count ** freq) + ); +}, 1);