moving squares (Canvas)

Nayana Das

by Aditya Shrivastava

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.title = square;
            context.fillRect(this.x,this.y,this.w,this.w);
            context.strokeRect(this.x,this.y,this.w,this.w);
            }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();
	    			}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 = canvas.getContext("2d");
    var max=200, min=0;
    
    var shapes =["square", "circle", "triangle", "rectangle"]
    
   // var rect1 = new Square(-40, 200, 40, "yellow");
    //var rect2 = new Square(0, 100, 40, "blue");
    //var objects = [rect1, rect2];
    var objects =[];
    
   ...