function Figure(x,y,color) { this.x = x; this.y = y; this.color = color; }; function Circle(x,y,r,color) { Figure.call(this,x,y,color); this.r = r; }; Circle.prototype.draw = function(par) { par.fillStyle = this.color; par.arc(this.x, this.y, this.r, 0, Math.PI*2, true); par.fill(); }; function Rect(x,y,w,h,color) { Figure.call(this,x,y,color); this.w = w; this.h = h; }; Rect.prototype.draw = function(par) { par.fillStyle = this.color; par.fillRect(this.x, this.y, this.x+this.w, this.y+this.h); }; function Line(x1,y1,x2,y2,color) { Figure.call(this,x1,y1,color); this.x2 = x2; this.y2 = y2; }; Line.prototype.draw = function(par) { par.strokeStyle = this.color; par.moveTo(this.x,this.y); par.lineTo(this.x2,this.y2); par.stroke(); }; function Canvas(id) { this.add = function(figure) { var canvas = document.getElementById(id), ctx = canvas.getContext("2d"); figure.draw(ctx); }; }; //------------------// var line = new Line(25, 75, 275, 75, 'red'); // x1, y1, x2, y2, color var circle = new Circle(120, 100, 50, 'green'); // x, y, r, color var rect = new Rect(100, 30, 50, 100, 'blue'); // x, y, w, h, color var drawArea = new Canvas('canvasLine'); drawArea.add(line); var drawArea = new Canvas('canvasCircle'); drawArea.add(circle); var drawArea = new Canvas('canvasRect'); drawArea.add(rect);