moving squares (Canvas)

Nayana Das

by Nayana Das

HTML

<canvas id="testCanvas" width=500 height=300>

JavaScript

var rectY=200, rectW=40;
var rectX = -rectW;
var canvas = null;
var context = null;

function Shapes(x, y, w, color, shape) 
{
    this.x = x;
    this.y = y;
    this.w = w;
    this.color = color;
    
    this.anim = function() 
    {
        if (this.x < context.canvas.width) {
        	if(shape=="square"){
            this.x += 5;
            context.fillStyle = this.color;
            context.strokeStyle = "red";
            context.lineWidth = 3;
            context.fillRect(this.x,this.y,this.w,this.w);
            context.strokeRect(this.x,this.y,this.w,this.w);
            
            var region = {x: this.x, y: this.y, w: 100, h: 100};
    				var t1 = new ToolTip(canvas, region, "This is a tool-tip", 150, 100);
            }else if(shape=="triangle"){
	    		
	    				this.x += 1;
	    				context.beginPath();
	    				context.moveTo(this.x, this.x-20);
	    	    	context.lineTo(this.x+60, this.x);
	    	    	context.lineTo(this.x+25, this.x+50);
	    				context.closePath();
	    				context.fillStyle = "blue";
	    				context.fill();
              
              var region = {x: this.x, y: this.y, w: 100, h: 100};
    					var t1 = new ToolTip(canvas, region, "tool-tip 222", 150, 100);
	    			}else if(shape=="circle"){
	    					this.x += 1;
	    					context.beginPath();
	    					context.arc(this.x, this.y, 25, 0, 2 * Math.PI, false);
	    					context.fillStyle = "green";
	    					context.fill();
	    					context.strokeStyle = '#003300';
	    					context.stroke();
	    			}
            if(shape=="rectangle"){
	    					this.x += 1;
	            	context.fillStyle = "#ff6600";
	            	context.strokeStyle = "blue";
	            	context.lineWidth = 3;
	            	context.fillRect(this.x,this.y,this.w+30,this.w);
	            	context.strokeRect(this.x,this.y,this.w+30,this.w);
	    	}
        }
        else this.x=-this.w;
    }
}

function init() {
    canvas = document.getElementById('testCanvas');
    context =...