On the occasion of INDIA 78th independence day we brings you a flag animation effect with javascript canvas where we have created three strips with animation in canvas, Canvas flag animation is a captivating way to bring graphics to life using HTML5’s <canvas> element. By leveraging JavaScript, you can create dynamic, visually appealing animations that simulate the fluttering of a flag in the wind. The core of this animation involves drawing the flag on the canvas and manipulating its pixels to create a wave-like motion. You can adjust parameters such as wave height, frequency, and speed to achieve realistic effects. This technique not only enhances user engagement but also showcases your coding skills. Experiment with colors and shapes to personalize your flag animation and make it truly unique!
<script>
window.onload = function(){
var flag = document.getElementById('flag');
drawFlag( flag, 520, 0, 40 );
flag.style.marginLeft = -(flag.width/2)+'px';
flag.style.marginTop = -(flag.height/2)+'px';
var timer = waveFlag( flag, 20, 10, 150, 200, -0.1 );
};
function drawFlag( canvas, width, padX, padY ){
if (!padX) padX = 0;
if (!padY) padY = 0;
var a = width / 1.9;
var b = width;
var c = 7*a/13;
var d = 0.76*a;
var e = 0.054*a;
var g = 0.063*a;
var k = 0.0616*a;
var l = a / 13;
canvas.width = b+2*padX;
canvas.height = a+2*padY;
var ctx = canvas.getContext('2d');
// Stripes
ctx.fillStyle = "#FF9935";
ctx.fillRect(5,26,500,120);
ctx.fillStyle = "#fff";
ctx.fillRect(5,120,500,120);
ctx.fillStyle = "#118806";
ctx.fillRect(5,210,500,120);
ctx.font = "38px serif";
ctx.fillText("78th independence day", 60, 170);
}
function waveFlag( canvas, wavelength, amplitude, period, shading, squeeze ){
if (!squeeze) squeeze = 0;
if (!shading) shading = 100;
if (!period) period = 200;
if (!amplitude) amplitude = 10;
if (!wavelength) wavelength = canvas.width/10;
var fps = 30;
var ctx = canvas.getContext('2d');
var w = canvas.width, h = canvas.height;
var od = ctx.getImageData(0,0,w,h).data;
// var ct = 0, st=new Date;
return setInterval(function(){
var id = ctx.getImageData(0,0,w,h);
var d = id.data;
var now = (new Date)/period;
for (var y=0;y<h;++y){
var lastO=0,shade=0;
var sq = (y-h/2)*squeeze;
for (var x=0;x<w;++x){
var px = (y*w + x)*4;
var pct = x/w;
var o = Math.sin(x/wavelength-now)*amplitude*pct;
var y2 = y + (o+sq*pct)<<0;
var opx = (y2*w + x)*4;
shade = (o-lastO)*shading;
d[px ] = od[opx ]+shade;
d[px+1] = od[opx+1]+shade;
d[px+2] = od[opx+2]+shade;
d[px+3] = od[opx+3];
lastO = o;
}
}
ctx.putImageData(id,0,0);
},1000/fps);
}
</script>78th Independence Day of India
india independence day information, india independence day invitation template
India proudly celebrates its 78th Independence Day on August 15, 2024, commemorating the nation's hard-fought freedom from British colonial rule. This momentous occasion holds immense significance for every Indian, serving as a reminder of the sacrifices made by countless freedom fighters who laid down their lives for the country's liberation. The Indian national flag, known as the Tricolor, is a symbol of unity, courage, and prosperity. Its saffron hue represents the strength and valour of the nation, while white signifies peace and truth. The green band symbolizes the fertility, growth, and auspiciousness of the land, and the navy-blue Ashok Chakra in the center embodies the wheel of law and the spirit of continuous progress. Independence Day celebrations in India are a grand affair, marked by flag-hoisting ceremonies, parades showcasing the country's cultural diversity, and patriotic performances. The Prime Minister hoists the national flag at the Red Fort in New Delhi and delivers a speech highlighting the nation's achievements and future goals. As we commemorate the 78th Independence Day, let us pay homage to our freedom fighters, rededicate ourselves to the values of justice, equality, and progress, and work together to build a stronger, more prosperous India. Jai Hind!
