# How i extends class in p5.js?

**URL:** <https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894>\
**Category:** Coding Questions\
**Created:** [June 12, 2018, 11:56am UTC](https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894 "2018-06-12T11:56:22Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 12, 2018, 6:11pm UTC](https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894/3 "2018-06-12T18:11:46Z")

</div>

JavaScript got a prototype inheritance system, in which we make available all properties to be extended by annexing them all to a constructor function’s property object `{}` called _prototype_: 🗃

> **[Inheritance and the prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)**
>
> JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++), as it is dynamic and does not provide a class implementation per se (the class keyword is introduced in ES2015, but is syntactical sugar, JavaScript...

For example If we wanna extend the class p5 (classes are constructor functions btW) w/ a new method called **square()**, we can simply annex it to p5._prototype{}_ object, like this: 👍

```auto
p5.prototype.square = function (x, y, size) {
  return this.rect(x, y, size, size);
};

```

And a more complex example, but now extending the class p5.Image instead, w/ a new method called **resizeNN()**: 👌

> <https://gist.github.com/GoToLoop/2e12acf577506fd53267e1d186624d7c>

---

_[View the full topic](https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894)._