p5.js canvas operation practice: create, bind specified elements, dynamically adjust size, hide scroll bars, delete canvas

Article Introduction

Previously, I briefly talked about how to use p5.js to create a canvas in “Introduction to p5.js Lightspeed”.

This time I will introduce several canvas-related methods provided by p5.js.

Related configuration when creating canvas.
Lets the canvas bind the specified element.
Resets the canvas size.
Delete the canvas.

Before studying this article, you need to have some knowledge of p5.js. If you want to know more, please check “Introduction to p5.js Light Speed”.

Create canvas

The method to create a canvas in p5.js is called createCanvas, but you can actually create a canvas if you don’t use this method.

If you use life cycle functions such as p5.js‘s setup() or draw(), they will also be on the page by default. Create a canvas.

function setup() {
  background(123)
}

This is the default action of p5.js. When the width and height of the canvas are not specified, the canvas will be displayed in the size of 100px * 100px by default.

If you want to customize the width and height of the canvas, you can use the createCanvas(width, height) method to pass in the width and height values.

function setup() {
  createCanvas(300, 200)
  background(123)
}

In “p5.js 3D Graphics – Cube”, it is introduced that when rendering 3D graphics, you can pass in the WEBGL parameter in createCanvas(). Interested workers can take a look.

Let the canvas bind the specified element

Use the previously mentioned method to create a canvas. p5.js will help us add the canvas to the end of the tag by default. As shown below.

If you want to add the canvas to a specific page element, you can do this:

Get the specified element of the page
Use createCanvas to create a canvas and return the canvas object
Add the canvas to the specified element on the page

<div>d1</div>
<div id="d2"></div>
<div>d3</div>

<script>
function setup() {
  // 【step 1】
  let divElement = document.getElementById('d2')
  //【Step 2】
  let canvas = createCanvas(300, 200)
  //【Step 3】
  canvas.parent(divElement)

  background(123)
}
</script>

In this example, first create three

on the page, and then insert the canvas into the second

The canvas.parent() method can specify the parent element of the canvas, and the passed-in parameter is the parent element object.

Let the canvas fill the entire page

From the previous example, we know that using createCanvas(width, height) can set the width and height of the canvas.

We can use window.innerWidth and window.innerHeight to get the width and height of the page. This is a native knowledge point.

In fact, p5.js also provides some commonly used constants. For example, to get the page width and height, you can use windowWidth and windowHeight.

We pass these two constants into createCanvas to create a canvas with the same width and height as the page.

file

function setup() {
  createCanvas(windowWidth, windowHeight)
  background(123)
}

But workers with good eyesight should have discovered that using this trick will cause scroll bars to appear.

Workers with development experience may know that the root tag has a default margin. If you change the margin of Will setting to 0 solve this problem?

file

<style>
  html, body {
    margin: 0;
    padding: 0;
  }
</style>

<script>
function setup() {
  createCanvas(windowWidth, windowHeight)
  background(123)
}
</script>

This can only solve half of the problem. If you only look at the upper left corner of the page, the white border will indeed be removed. But the scroll bar still appears.

The real solution is:

Set the body‘s margin to 0.
Set the canvas’s display to block.

file

We can set its display to block after creating the canvas. The code is as follows:

<style>
  html, body {
    margin: 0;
    padding: 0;
  }
</style>

<script>
function setup() {
  let canvas = createCanvas(windowWidth, windowHeight)
  canvas.style('display', 'block')
  background(123)
}
</script>

Reset canvas size

After learning the previous tricks, you may encounter the situation that the canvas size does not follow the scaling when the browser is zoomed.

The size of the preview gif is relatively large, please wait~

file

At this point we can use the windowResized method provided by p5.js to monitor the browser zoom, and then modify the canvas size through the resizeCanvas(width, height) method .

Take a good look:

file

<style>
  html, body {
    margin: 0;
    padding: 0;
  }
</style>

<script>
let canvas = null

function setup() {
  let canvas = createCanvas(windowWidth, windowHeight)
  canvas.style('display', 'block')
  background(123)
}

// Monitor browser window changes
function windowResized() {
  //Reset canvas size
  resizeCanvas(windowWidth, windowHeight)
  background(123)
}
</script>

In addition to setting the canvas width, sometimes you may also need to dynamically set the position of the canvas.

The method to set the canvas position is position(x, y). Workers in need can try it themselves~

Delete canvas

In the next article, I will introduce how to use p5.js to create a video element. At this time, you need to hide the canvas element, otherwise it will take up space on the page.

In this case, you need to use the noCanvas() method.

This method can be called directly when needed, and I will not record the screen display again.

noCanvas()

Article Introduction

Create canvas

Let the canvas bind the specified element

Let the canvas fill the entire page

Reset canvas size

Delete canvas

Recommended Reading