Canvas Draw text inside a circle in Javascript

<!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.9.1.js’></script> <script type=’text/javascript’> $(window).load(function(){ var canvas1 = document.getElementById(“canvas”); var context = canvas1.getContext(“2d”); context.beginPath(); context.fillStyle = “blue”; context.strokeStyle = “black”; context.font = “20px Georgia”; context.lineWidth = 10; context.arc(100, 100, 75, 0, 2 * Math.PI, false); context.fill(); context.beginPath(); context.fillStyle = “red”; context.fillText(“Hello World!”, 40, 100); context.fill(); }); </script> </head> <body> <canvas

Count click and output click count in Javascript

<!DOCTYPE html> <html> <head> <script type=’text/javascript’> window.onload=function(){ (function() { var oCount = document.getElementById(‘count’); var oResult = document.getElementById(‘result’); var nCount = 0; oCount.addEventListener(‘click’, function(e) { e.preventDefault(); nCount += 1; switch(nCount) { case 1: oResult.innerHTML = ‘One’; break; case 2: oResult.innerHTML = ‘Two’; break; default: oResult.innerHTML = ‘More than 2’; } }, false); })(); } </script> </head>

Create CSS Menu in materialize

<!DOCTYPE html> <html> <head> <title>CSS Menu</title> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css”> <script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js”></script> </head> <body> <nav> <div class=”nav-wrapper”> <li class=”brand-logo center”> LOGO </li> <ul class=”right”> <li><a href=”#”> Menu 1 </a></li> <li><a href=”#”> Menu 2 </a></li> <li><a href=”#”> Menu 3 </a></li> </ul> </div> </nav> </body> </html>

Use custom image as Cursor in jQuery

<!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.10.1.js’></script> <style type=’text/css’> div { width: 500px; height: 500px; background-color: #F00; } </style> <script type=’text/javascript’> $(window).load(function(){ $(“div”).css(‘cursor’,’url(“cursor.png”),auto’); <!–You can change cursor.png image to change other image you will be shown in the website–> }); </script> </head> <body> <div></div> </body> </html>

Canvas Draw rainbow circle in javascript

<!DOCTYPE html> <html> <head> <script type=’text/javascript’> window.onload=function(){ var canvas = document.getElementById(“picker”); var context = canvas.getContext(“2d”); var x = canvas.width / 2; var y = canvas.height / 2; var radius = 100; var counterClockwise = false; for(var angle=0; angle<=360; angle+=1){ var startAngle = (angle-1)*Math.PI/180; var endAngle = angle * Math.PI/180; context.beginPath(); context.moveTo(x, y); context.arc(x, y, radius,

Slide to hide Animation in jQuery

<!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.10.1.js’></script> <script type=’text/javascript’> $(window).load(function(){ $(document).ready(function () { $(‘.show_hide’).click(function () { $(‘.slidingDiv’).slideToggle(‘fast’); }); }); }); </script> </head> <body> <div class=”slidingDiv” style=”display: none;”>Sliding Div</div> <button class=”show_hide”>Show/Hide</button> </body> </html>

Canvas Create sunshine effect in javascript

<!DOCTYPE html> <html> <head> <script type=’text/javascript’> window.onload=function(){ function setSunBg(canvasId, n) { var bgCanvas = document.getElementById(canvasId); var width = parseInt(bgCanvas.getAttribute(‘width’), 10); var height = parseInt(bgCanvas.getAttribute(‘height’), 10); var cx = width / 2; var cy = height / 2; if (bgCanvas && bgCanvas.getContext) { var context = bgCanvas.getContext(‘2d’); if (context) { var grd = context.createRadialGradient(cx, cy, 0,

Blink text in jQuery

<!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-2.1.0.js’></script> <script type=’text/javascript’>//<![CDATA[ $(window).load(function(){ setInterval(function(){ $(‘.comments’).toggle(); }, 1000); });//]]> </script> </head> <body> <div class=”comments”>Hello World</div> </body> </html>

Canvas Draw Spiral animation in Javascript

<!DOCTYPE html> <html> <head> <script type=’text/javascript’> window.onload=function(){ function DrawSpiral(mod) { var c = document.getElementById(“myCanvas”); var cxt = c.getContext(“2d”); var centerX = 150; var centerY = 150; cxt.save(); cxt.clearRect(0, 0, c.width, c.height); cxt.beginPath(); cxt.moveTo(centerX, centerY); var STEPS_PER_ROTATION = 60; var increment = 2 * Math.PI / STEPS_PER_ROTATION; var theta = increment; while (theta < 40 *

Canvas Chase the mouse animation in javascript

<!DOCTYPE html> <html> <head> <script type=’text/javascript’> window.onload=function(){ var canvas=document.getElementById(“canvas”); var ctx = canvas.getContext(“2d”); canvas.width = canvas.height = 500; var targetX = 0,targetY = 0; var x = 10, y = 10; var velX = 0, velY = 0; var speed = 5; function update(){ var tx = targetX – x, ty = targetY – y;