[p5] p5.js와 Canvas API 결합

elt 속성을 통해 참조하기

p5.js와 HTML5 Canvas API를 동일한 캔버스에서 사용하려면, elt 속성을 사용하여 p5.js에서 생성한 캔버스의 실제 DOM 요소를 가져와야 함


elt 속성을 사용하지 않고 두 API를 결합하려고 하면, 두 개의 별도 캔버스를 사용하게 됨 -> 이거 외엔 방법 없음

---

코드

let canvas;

function setup() {
  canvas = createCanvas(400, 400); // p5.js 캔버스를 생성하고 변수에 저장
  background(220);

  // p5.js를 사용하여 원을 그립니다.
  fill(255, 0, 0);
  circle(150, 150, 100);

  // p5.js 캔버스의 실제 HTML <canvas> 요소를 가져옵니다.
  let ctx = canvas.elt.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(150, 150, 100, 100);
}

function draw() {
  // 여기에 애니메이션 또는 다른 그리기 코드를 추가할 수 있습니다.
}

---

결론

elt 속성은 p5.js와 HTML5 Canvas API를 결합하여 동일한 캔버스에서 작업할 수 있게 해주는 중요한 속성.

이를 통해 p5.js의 고수준 기능과 HTML5 Canvas API의 저수준 기능을 모두 사용할 수 있음