Про наследование
 

Пытаюсь понять как работает ООП в js. Особенно интересно наследование.
Вот предположим хотим сделать различные классы для 2d графики на canvas.

Начнём с точки.

function point(x,y){
this.x=x;
this.y=y;
}

А вот как дальше например линию реализовать на базе точки, а потом на базе линии треугольник сделать, не пойму.
Может ли нам здесь пригодиться метод superclass?

Cтатьи читал про ООП, но недопонимаю.

немудрено что вы не понимаете статьи, если вы видите такое наследование обычно делается от общего к частному.
то, есть, например:
треугольник наследует свойства(является частным случаем) многоугольника.

но, треугольник состоит из отрезков

так вот, вы не отличаете наследует свойства(является частным случаем) от состоит из

Ясно, но вот как все таки реализовать хотя бы для линии?

Вообще столько статей про наследование прочитал, но так и не понял superclass для чего нужен?
ЕГо можно применить в ООП?

А что, есть другие парадигмы с классами?

Суперкласс - класс-родитель, от которого наследуется текущий.

По реализации линий: нужно определиться с форматом задания линий. Например, задавать линию двумя точками (т.е. как состоящую из 2 экземпляров класса Point).

Т.е. как то так

function point(x,y){
this.x=x;
this.y=y;
this.draw=function(){....}
}

function line(p1,p2){
this.p1=p1;
this.p2=p2;
this.superclass=point;
}

Что, то не то. Или я наследование не понимаю

Здесь нет наследования. И быть не может.
Читайте пост Гвоздя.

mycoding,
в сети куча статей разной степени углублённости. Читайте. Ничего нового вам тут не скажут.

Вот вроде бы, что то похожее на наследование получилось
Делаем кролика, лису и волка, они говорят имя своего класса.
А потом бегут кто быстрее.

<script>
function Animal() {
	this.x;
	this.y;
	this.out=false;
}

Animal.prototype = {
	move:function(){
		var width=$('canvas').width;
		var height=$('canvas').height;		
		this.x+=this.distance;
		if(this.x>width) {this.out=true;}
	},
    echo : function(){alert(this.name);},
	setCoords : function(x,y){
		this.x=x;
		this.y=y;	
	}	
}
 
function Rabbit() {
    this.name = 'Кролик';
	this.distance = 3;	
}

function Wolf() {
    this.name = 'Волк';
	this.distance = 5;	
}

function Fox() {
    this.name = 'Лиса';
	this.distance = 4;
}

var animal = new Animal();
 
Rabbit.prototype = Wolf.prototype = Fox.prototype = animal;
var rabbit1 = new Rabbit();
var wolf1 = new Fox();
var fox1 = new Wolf();
 
rabbit1.echo();
wolf1.echo();
fox1.echo();

rabbit1.setCoords(2,30);
wolf1.setCoords(2,100);
fox1.setCoords(2,150);

function $(id){return document.getElementById(id);}

window.onload = function(){


canvas=$('canvas').getContext('2d');
interval=setInterval(function(){draw(canvas);},100);

}

function draw(ctx){
ctx.clearRect(0,0,400,200);
rabbit1.move();
fox1.move();
wolf1.move();
ctx.beginPath();
       ctx.arc(rabbit1.x,rabbit1.y,2,0,Math.PI*2,true); // Внешний круг
ctx.stroke();

ctx.beginPath();
       ctx.arc(wolf1.x,wolf1.y,2,0,Math.PI*2,true); // Внешний круг
ctx.stroke();

ctx.beginPath();
       ctx.arc(fox1.x,fox1.y,2,0,Math.PI*2,true); // Внешний круг
ctx.stroke();
if(rabbit1.out && rabbit1.out && rabbit1.out) {clearInterval(interval);}
}
</script>
<canvas id='canvas' width=400 height=200 style="border:1px solid #888888"></canvas>