Raphael.JS: Draw circle based on mouse move

Raphael is a JavaScript library for drawing vector graphics on the web. Here i have created a small JavaScript program to draw a circle based on mouse move. You just need to include JQuery and Raphael JavaScript libraries.Then create an HTML div to use as drawing canvas and copy the JavaScript from here and cheer.

HTML

<div id="Div1" style="width: 600px;

        height: 400px; border: 4px dotted #ccc;

        cursor: crosshair;">

</div>

HTML5 Canvas: Create a nice Animation

HTML5 Canvas has made it easy to create 2D graphics and animations using simple JavaScript. The following code generates a beautiful animation which can be used as a banner. 

HTML

<canvas id="canvas" width="360" height="320" style="background: #ccc" ></canvas>

JavaScript

var canvas, ctx,
        x = 180,  y = 160,              // central point
        r = 5,                          // radius of beg circle
        r1 = 5,                         // radius of other circles
        xs = [0, 0, 0, 0, 0, 0],        // initial values of X for small circles
        ys = [0, 0, 0, 0, 0, 0],        // initial values of Y for small circles

        x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6; 
                                        // central points of small circles
        angle = [1, 2, 3, 4, 5, 6],     // distances/angles of circles
        wait = 60,                      // duration
        WIDTH = 360,                    // Canvas width
        HEIGHT = 320;                   // Canvas Height

    function circle(x, y, r) {          // Draw a circle 
        ctx.beginPath();
        var crcl = ctx.arc(x, y, r, 0, Math.PI * 2, true);
        ctx.fill();
    }

    function clear() {                    // Clear the canvas
        ctx.clearRect(0, 0, WIDTH, HEIGHT);
    }

    function draw() {   
        clear();

        if (r < 81) {
            for (var i = 0; i < xs.length; i++) {
                xs[i] = x + Math.cos(angle[i]) * (r + r1 - 5);
                ys[i] = y + Math.sin(angle[i]) * (r + r1 - 5);
                angle[i] += .1;
            }
        }

        ctx.fillStyle = "#7f93ae";
        circle(x, y, r);

        ctx.fillStyle = "#4a8e29";
        circle(xs[0], ys[0], r1);

        ctx.fillStyle = "#2031a3";
        circle(xs[1], ys[1], r1);

        ctx.fillStyle = "#d9d939";
        circle(xs[2],ys[2], r1);

        ctx.fillStyle = "#e96360";
        circle(xs[3], ys[3],r1);

        ctx.fillStyle = "#834b92";
        circle(xs[4], ys[4], r1);

        ctx.fillStyle = "#d28245";
        circle(xs[5], ys[5], r1);

        if (r <= 100)
            r += 1;
else                              // clear the interval 
           clearInterval(animInterval);


        if (r1 <= 50) {
            r1 += .5;
        }

        if (r >= 81) {
            ctx.fillStyle = "#000";
            ctx.font = "24px verdana";
            ctx.textAlign = "center";
            ctx.fillText('JS', x, y-3);
            ctx.fillText('Queries', x, y + 25);

            // Small circles
            ctx.font = "12px verdana";
            ctx.fillText('Raphaël', xs[0], ys[0] - 3);
            ctx.fillText('JS', xs[0], ys[0] + 12);
            ctx.fillText('Knockout', xs[1], ys[1] - 3);
            ctx.fillText('JS', xs[1], ys[1] + 12);
            ctx.fillText('JQuery', xs[2], ys[2] - 3);
            ctx.fillText('JQuery UI', xs[2], ys[2] + 12);
            ctx.fillText('Angular', xs[3], ys[3] - 3);
            ctx.fillText('JS', xs[3], ys[3] + 12);
            ctx.fillText('Node', xs[4], ys[4] - 3);
            ctx.fillText('JS', xs[4], ys[4] + 12);
            ctx.fillText('Backbone', xs[5], ys[5] - 3);
            ctx.fillText('JS', xs[5], ys[5] + 12);
        }
    }
    window.onload = function () {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        ctx.globalAlpha = .8;

animInterval = setInterval(draw, wait);
    }

ASCII and JavaScript validations

Client side JavaScript validations are mostly done using regular expressions, but Regular expressions are difficult to understand. That is why, a complicated custom validations requires a lot of work to do. The easiest way in such case is to use ASCII Unicode characters and JavaScript. 

Every character has an alternate ASCII representation e.g.  ASCII code for Uppercase A is 65 and that for Z is 90. So we can say a character is an upper case alphabet If its ASCII code is between 64 and 91.

JavaScript code to find ASCII Unicode for a character is

              var ch = "H";
              var n = ch.charCodeAt(0);

it will return 72, because ASCII code for H is 72.

Now if for some input we want to have at least one uppercase character. we can write something like this.

      var str = document.getElementById('elementId').value;
      var condition = false;
      for( var i = 0;  i  <  str.length;  i++ )
      {
               var n = str.charCodeAt(i);
               if(n   >=   65 && n  <=  90)
               {
                      Condition = true;
                      Return;
               }
       }

Similarly we can do for special characters, numbers and small alphabets. e.g. we can do a check for special character @ as follow.

              if (n == 64)  // Unicode for @ is 64
              {
                    Condition = true;
                    Return;
              }