# 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:** 5

<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 13, 2018, 10:43am UTC](https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894/5 "2018-06-13T10:43:17Z")

</div>

Yes, it is possible. But in order to use an extended p5 subclass, you’re gonna need to write your code using the dreadful “instance mode” approach: 🙄

- [https://GitHub.com/processing/p5.js/wiki/Global-and-instance-mode](https://GitHub.com/processing/p5.js/wiki/Global-and-instance-mode)

## “index.html”:

```auto
<script defer src=https://CDN.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

```

## “sketch.js”:

```auto
/**
 * Class p5 Extended (v1.0.1)
 * GoToLoop (2018-Jun-13)
 * https://Discourse.Processing.org/t/how-i-extends-class-in-p5-js/894/5
 */

"use strict";

class p5Plus extends p5 {
  square(x, y, size) {
    return this.rect(x, y, size, size);
  }
}

function mySketch(p) {
  const RATIO = .75, BOLD = 3.5;

  p.setup = function () {
    p.createCanvas(p.displayWidth * RATIO, p.displayHeight * RATIO);
    p.rectMode(p.CENTER).colorMode(p.RGB).noLoop();
    p.fill('yellow').stroke('red').strokeWeight(BOLD);
  };

  p.draw = function () {
    p.background(0).square(p.width >> 1, p.height >> 1, p.width >> 1);
  };
}

new p5Plus(mySketch);

```

---

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