# defaultCanvas problem

**URL:** <https://discourse.processing.org/t/defaultcanvas-problem/20776>\
**Category:** Coding Questions\
**Created:** [May 12, 2020, 11:06am UTC](https://discourse.processing.org/t/defaultcanvas-problem/20776 "2020-05-12T11:06:52Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![TDSV](https://avatars.discourse-cdn.com/v4/letter/t/8e8cbc/32.png) [@TDSV](https://discourse.processing.org/u/TDSV)\
**Post date:** [May 12, 2020, 11:06am UTC](https://discourse.processing.org/t/defaultcanvas-problem/20776/1 "2020-05-12T11:06:52Z")

</div>

Hello  
I have a problem with p5js, I use video capture. The code works well and is displayed correctly. But by associating my P5Js with my HTML, I have two defaultCanvas that appear in my HTML when I inspect. one with my video and other one with nothing inside. Can you help me for resolve problem please.

```auto
let video;
let taille = 20;

function setup() {
    let cnv = createCanvas(640, 480);
    cnv.parent('theCanvas');
    pixelDensity(1);
    video = createCapture(VIDEO);
    video.size(width/taille, height/taille);
    video.hide();
}

function draw() {
  background(0);
  video.loadPixels();
  loadPixels();
  for (let y = 0; y < video.height; y++) {
    for (let x = 0; x < video.width; x++) {
        let index = (x+y * video.width)*4;
        let r = video.pixels[index+0];
        let g = video.pixels[index+1];
        let b = video.pixels[index+2];
        let bright = (r+g+b)/3;
        let w = map(bright, 0, 255, taille*2, 0);
        let col = color(r,g,b);
        let sinY = sin(x + frameCount*0.015);
        let motion = map(sinY, -0.5, 1, 1, 50);
        let moduleLen = motion;
        push();
        translate(x*taille, y*taille);
          module(0,moduleLen,w, col);
        pop();
    }
  } 
}

```

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [May 13, 2020, 6:01am UTC](https://discourse.processing.org/t/defaultcanvas-problem/20776/2 "2020-05-13T06:01:55Z")

</div>

Welcome to the forums!

Could you describe your problem more?

---

<div class="post-metadata">

**Author:** ![TDSV](https://avatars.discourse-cdn.com/v4/letter/t/8e8cbc/32.png) [@TDSV](https://discourse.processing.org/u/TDSV)\
**Post date:** [May 13, 2020, 9:13am UTC](https://discourse.processing.org/t/defaultcanvas-problem/20776/3 "2020-05-13T09:13:08Z")

</div>

Hello,  
thank you,

My problem, it’s camera capture create one more defaultCanvas with nothing inside. I try to hide it with `viedo.hide();` but nothing.

 ![p5js problem](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d72e95f58e15b524d8f08596f8bf3ff37511e5dd.jpeg)

Thank you in advance.

---

<div class="post-metadata">

**Author:** ![Yom](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yom](https://discourse.processing.org/u/Yom)\
**Post date:** [May 14, 2020, 12:35am UTC](https://discourse.processing.org/t/defaultcanvas-problem/20776/4 "2020-05-14T00:35:36Z")

</div>

Hello, try remove the default canvas by removing these 2 lines

```javascript
let cnv = createCanvas(640, 480);
cnv.parent('theCanvas');

```

And replace with

```javascript
noCanvas();

```

---

<div class="post-metadata">

**Author:** ![TDSV](https://avatars.discourse-cdn.com/v4/letter/t/8e8cbc/32.png) [@TDSV](https://discourse.processing.org/u/TDSV)\
**Post date:** [May 14, 2020, 10:51am UTC](https://discourse.processing.org/t/defaultcanvas-problem/20776/5 "2020-05-14T10:51:26Z")

</div>

> [@Yom](#):
>
> noCanvas();

Thank you for your help,  
i find solution, I have superimposed two canvas.

```auto
var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);

```