├── 01 basic ├── index.html ├── index.js └── style.css ├── 02 Particle System ├── index.html ├── index.js └── style.css ├── 03 mouse trail event ├── index.html ├── index.js └── style.css ├── 04 constellation effect ├── index.html ├── index.js └── style.css └── README.md /01 basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /01 basic/index.js: -------------------------------------------------------------------------------- 1 | const canvas = document.getElementById("canvas1"); 2 | const ctx = canvas.getContext("2d"); 3 | console.log(canvas); 4 | console.log(ctx); 5 | canvas.width = window.innerWidth; 6 | canvas.height = window.innerHeight; 7 | 8 | window.addEventListener("resize", () => { 9 | canvas.width = window.innerWidth; 10 | canvas.height = window.innerHeight; 11 | ctx.fillStyle = "white"; 12 | ctx.fillRect(10, 20, 150, 50); 13 | }); 14 | ctx.fillStyle = "white"; 15 | 16 | ctx.lineWidth = 5; 17 | 18 | ctx.fillRect(10, 20, 150, 50); //x cordinate,y cordinate, width,height 19 | 20 | const mouse = { 21 | x: 100, 22 | y: 100, 23 | }; 24 | 25 | canvas.addEventListener("mousemove", (event) => { 26 | mouse.x = event.x; 27 | mouse.y = event.y; 28 | drawCircle(); 29 | }); 30 | 31 | function drawCircle() { 32 | ctx.fillStyle = "blue"; 33 | ctx.beginPath(); 34 | ctx.arc(mouse.x, mouse.y, 50, 0, Math.PI * 2); 35 | ctx.fill(); 36 | } 37 | //x cordinate, y cordinate,radis, start angle,end angle 38 | 39 | function animate() { 40 | ctx.clearRect(0, 0, canvas.width, canvas.height); 41 | drawCircle(); 42 | requestAnimationFrame(animate); 43 | } 44 | animate(); 45 | -------------------------------------------------------------------------------- /01 basic/style.css: -------------------------------------------------------------------------------- 1 | #canvas1 { 2 | position: absolute; 3 | background: black; 4 | width: 100%; 5 | height: 100%; 6 | top: 0; 7 | left: 0; 8 | } 9 | -------------------------------------------------------------------------------- /02 Particle System/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /02 Particle System/index.js: -------------------------------------------------------------------------------- 1 | const canvas = document.getElementById("canvas1"); 2 | const ctx = canvas.getContext("2d"); 3 | console.log(canvas); 4 | console.log(ctx); 5 | canvas.width = window.innerWidth; 6 | canvas.height = window.innerHeight; 7 | let particalArray = []; 8 | 9 | const mouse = { 10 | x: null, 11 | y: null, 12 | }; 13 | 14 | canvas.addEventListener("mousemove", (event) => { 15 | mouse.x = event.x; 16 | mouse.y = event.y; 17 | }); 18 | 19 | class Partical { 20 | constructor() { 21 | // this.x = mouse.x; 22 | // this.y = mouse.y; 23 | this.x = Math.random() * canvas.width; 24 | this.y = Math.random() * canvas.height; 25 | this.size = Math.random() * 15 + 1; // random size 26 | // horizontal speed property 27 | this.speedX = Math.random() * 3 - 1.5; // random no betn +1.5 and -1.5 28 | // vertical spreed property 29 | this.speedY = Math.random() * 3 - 1.5; 30 | } 31 | update() { 32 | this.x += this.speedX; 33 | this.y += this.speedY; 34 | if (this.size > 0.2) this.size -= 0.1; 35 | } 36 | draw() { 37 | ctx.fillStyle = "blue"; 38 | ctx.beginPath(); 39 | ctx.arc(this.x, this.y, 50, 0, Math.PI * 2); 40 | ctx.fill(); 41 | } 42 | } 43 | function init() { 44 | // name of function can be diff. 45 | for (let i = 0; i < 100; i++) { 46 | particalArray.push(new Partical()); 47 | } 48 | } 49 | init(); 50 | function handleParticles() { 51 | for (let i = 0; i < particalArray.length; i++) { 52 | particalArray[i].update(); 53 | particalArray[i].draw(); 54 | if (particalArray[i].size <= 0.3) { 55 | particalArray.splice(i, 1); 56 | i--; 57 | } 58 | } 59 | } 60 | console.log(); 61 | function animate() { 62 | ctx.clearRect(0, 0, canvas.width, canvas.height); 63 | handleParticles(); 64 | requestAnimationFrame(animate); 65 | } 66 | animate(); 67 | -------------------------------------------------------------------------------- /02 Particle System/style.css: -------------------------------------------------------------------------------- 1 | #canvas1 { 2 | position: absolute; 3 | background: black; 4 | width: 100%; 5 | height: 100%; 6 | top: 0; 7 | left: 0; 8 | } 9 | -------------------------------------------------------------------------------- /03 mouse trail event/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /03 mouse trail event/index.js: -------------------------------------------------------------------------------- 1 | const canvas = document.getElementById("canvas1"); 2 | const ctx = canvas.getContext("2d"); 3 | console.log(canvas); 4 | console.log(ctx); 5 | canvas.width = window.innerWidth; 6 | canvas.height = window.innerHeight; 7 | let particalArray = []; 8 | let hue = 0; 9 | 10 | const mouse = { 11 | x: null, 12 | y: null, 13 | }; 14 | 15 | canvas.addEventListener("mousemove", (event) => { 16 | mouse.x = event.x; 17 | mouse.y = event.y; 18 | for (let i = 0; i < 10; i++) { 19 | particalArray.push(new Partical()); 20 | } 21 | }); 22 | 23 | class Partical { 24 | constructor() { 25 | this.x = mouse.x; 26 | this.y = mouse.y; 27 | // this.x = Math.random() * canvas.width; 28 | // this.y = Math.random() * canvas.height; 29 | this.size = Math.random() * 15 + 1; // random size 30 | // horizontal speed property 31 | this.speedX = Math.random() * 3 - 1.5; // random no betn +1.5 and -1.5 32 | // vertical spreed property 33 | this.speedY = Math.random() * 3 - 1.5; 34 | this.color = "hsl(" + hue + ",100%,50%)"; 35 | } 36 | update() { 37 | this.x += this.speedX; 38 | this.y += this.speedY; 39 | if (this.size > 0.2) this.size -= 0.1; 40 | } 41 | draw() { 42 | ctx.fillStyle = this.color; 43 | ctx.beginPath(); 44 | ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); 45 | ctx.fill(); 46 | } 47 | } 48 | 49 | function handleParticles() { 50 | for (let i = 0; i < particalArray.length; i++) { 51 | particalArray[i].update(); 52 | particalArray[i].draw(); 53 | if (particalArray[i].size <= 0.3) { 54 | particalArray.splice(i, 1); 55 | i--; 56 | } 57 | } 58 | } 59 | console.log(); 60 | function animate() { 61 | ctx.fillStyle = "rgba(0,0,0,0.1)"; 62 | // ctx.clearRect(0, 0, canvas.width, canvas.height); 63 | ctx.fillRect(0, 0, canvas.width, canvas.height); 64 | handleParticles(); 65 | hue += 0.5; 66 | requestAnimationFrame(animate); 67 | } 68 | animate(); 69 | -------------------------------------------------------------------------------- /03 mouse trail event/style.css: -------------------------------------------------------------------------------- 1 | #canvas1 { 2 | position: absolute; 3 | background: black; 4 | width: 100%; 5 | height: 100%; 6 | top: 0; 7 | left: 0; 8 | } 9 | -------------------------------------------------------------------------------- /04 constellation effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04 constellation effect/index.js: -------------------------------------------------------------------------------- 1 | const canvas = document.getElementById("canvas1"); 2 | const ctx = canvas.getContext("2d"); 3 | console.log(canvas); 4 | console.log(ctx); 5 | canvas.width = window.innerWidth; 6 | canvas.height = window.innerHeight; 7 | let particalArray = []; 8 | let hue = 0; 9 | 10 | const mouse = { 11 | x: null, 12 | y: null, 13 | }; 14 | 15 | canvas.addEventListener("mousemove", (event) => { 16 | mouse.x = event.x; 17 | mouse.y = event.y; 18 | for (let i = 0; i < 10; i++) { 19 | particalArray.push(new Partical()); 20 | } 21 | }); 22 | 23 | class Partical { 24 | constructor() { 25 | this.x = mouse.x; 26 | this.y = mouse.y; 27 | // this.x = Math.random() * canvas.width; 28 | // this.y = Math.random() * canvas.height; 29 | this.size = Math.random() * 15 + 1; // random size 30 | // horizontal speed property 31 | this.speedX = Math.random() * 3 - 1.5; // random no betn +1.5 and -1.5 32 | // vertical spreed property 33 | this.speedY = Math.random() * 3 - 1.5; 34 | this.color = "hsl(" + hue + ",100%,50%)"; 35 | } 36 | update() { 37 | this.x += this.speedX; 38 | this.y += this.speedY; 39 | if (this.size > 0.2) this.size -= 0.1; 40 | } 41 | draw() { 42 | ctx.fillStyle = this.color; 43 | ctx.beginPath(); 44 | ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); 45 | ctx.fill(); 46 | } 47 | } 48 | 49 | function handleParticles() { 50 | for (let i = 0; i < particalArray.length; i++) { 51 | particalArray[i].update(); 52 | particalArray[i].draw(); 53 | 54 | for (let j = i; j < particalArray.length; j++) { 55 | const dx = particalArray[i].x - particalArray[j].x; 56 | const dy = particalArray[i].y - particalArray[j].y; 57 | const distance = Math.sqrt(dx * dx + dy * dy); 58 | if (distance < 100) { 59 | ctx.beginPath(); 60 | ctx.strokeStyle = particalArray[i].color; 61 | ctx.lineWidth = particalArray[i].size / 10; 62 | ctx.moveTo(particalArray[i].x, particalArray[i].y); 63 | ctx.lineTo(particalArray[j].x, particalArray[j].y); 64 | ctx.stroke(); 65 | } 66 | } 67 | 68 | if (particalArray[i].size <= 0.3) { 69 | particalArray.splice(i, 1); 70 | i--; 71 | } 72 | } 73 | } 74 | console.log(); 75 | function animate() { 76 | ctx.fillStyle = "rgba(0,0,0,0.1)"; 77 | // ctx.clearRect(0, 0, canvas.width, canvas.height); 78 | ctx.fillRect(0, 0, canvas.width, canvas.height); 79 | handleParticles(); 80 | hue += 0.5; 81 | requestAnimationFrame(animate); 82 | } 83 | animate(); 84 | -------------------------------------------------------------------------------- /04 constellation effect/style.css: -------------------------------------------------------------------------------- 1 | #canvas1 { 2 | position: absolute; 3 | background: black; 4 | width: 100%; 5 | height: 100%; 6 | top: 0; 7 | left: 0; 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # html-canvas 2 | HTML Canvas Projects 3 | --------------------------------------------------------------------------------