style()メソッドでcanvas要素の z-index を -1 に設定する。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【p5.js】スケッチをWebページの背景に設定する</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="sketch.js"></script>
<style>
p {
color: white;
}
</style>
</head>
<body>
<p>ようこそ、感情の創世へ</p>
</body>
</html>
sketch.js
function setup() {
let canvas = createCanvas(windowWidth, windowHeight);
canvas.position(0, 0);
canvas.style('z-index', '-1');
}
function draw() {
fill(0);
rect(0, 0, width, height/2);
fill(255);
rect(0, height/2, width, height/2);
arc(width/2, height/2, 300, 300, PI, TWO_PI);
fill(0);
arc(width/2, height/2, 300, 300, 0, PI);
arc(width/2, height/2, 290, 290, PI, TWO_PI);
fill(255);
arc(width/2, height/2, 290, 290, 0, PI);
}
今回の場合、スケッチの位置が文字よりも後ろに移動し、画面に白い文字と背景が表示される。
