Canvas, Prototype, Examples

Green Lesson11

 TP = {};

            TP.init = function(){

                var self = this;

                this.canvas = document.getElementById('canvas');

                this.ctx = canvas.getContext('2d');

                this.width = canvas.width;

                this.height = canvas.height;

                this.shapeList = [];

                this.animId = null;

                canvas.onclick = function(e){

                    var square = new TP.Square(

                        e.layerX, e.layerY, 40, self.ctx

                    );

                    self.shapeList.push(square);

                };

                this.animate();

            }

            TP.animate = function(){

                var self = this;

                this.render();

                this.animId = requestAnimationFrame(function(){

                    self.animate();

                });

            }

            TP.play = function(){

                var self = this;

                if (!this.animId) {

                    this.animId = requestAnimationFrame(function(){

                        self.animate();

                    });

                }             

            }

            TP.pause = function(){

                cancelAnimationFrame(this.animId);

                this.animId = null;

            }

            TP.render = function(){

                this.ctx.clearRect(0, 0, this.width, this.height);

                for(var index in this.shapeList){

                    this.shapeList[index].animate();

                }

            } 

TP.Square = function(x, y, size, ctx){

                this.x = x;

                this.y = y;

                this.size = size;

                this.ctx = ctx;

                this.color = '#'+Math.floor(

                    Math.random()*16777215

                ).toString(16);

            }

            TP.Square.prototype.render = function(){

                this.ctx.beginPath();

                this.ctx.rect(

                    this.x, this.y, this.size, this.size

                );

                this.ctx.fillStyle = this.color;

                this.ctx.fill();

                this.ctx.closePath();

            }

            TP.Square.prototype.move = function(newX, newY){

                this.x = newX;

                this.y = newY;

            }

            TP.Square.prototype.animate = function(){

                this.move(this.x - 1, this.y - 1);

                this.render();

            }