Canvas 생성자로 HTML5 캔버스 요소를 만들 수 있나요?

HTML5 캔버스 요소는 Canvas 생성자로 만들 수 없습니다

결론부터 말하면 아니요, Canvas 생성자를 사용해서 HTML5 캔버스(<canvas>) 요소를 직접 생성할 수는 없습니다. 대신 브라우저가 제공하는 DOM API인 document.createElement() 메서드를 사용해야 합니다.

document.createElement('canvas');

캔버스 요소를 동적으로 생성하는 방법

다음 예제처럼 createElement("canvas")로 새 캔버스 요소를 만든 뒤, id를 지정하고 문서에 추가하면 화면에 표시됩니다.

var canvas1 = document.createElement("canvas");
canvas1.id = "canvas1";

document.body.appendChild(canvas1);

코드 동작 원리

• document.createElement("canvas") — 새로운 <canvas> 요소를 메모리에 생성합니다.
• canvas1.id = "canvas1" — 이후 CSS 스타일링이나 JavaScript에서 참조할 수 있도록 id 속성을 설정합니다.
• document.body.appendChild(canvas1) — 생성한 요소를 실제 문서의 body에 추가하여 화면에 나타나게 합니다.

추가 팁: 캔버스 크기 지정하기

생성된 캔버스의 크기를 조절하려면 width와 height 속성을 함께 설정하는 것이 좋습니다.

canvas1.width = 300;
canvas1.height = 150;

이렇게 하면 자바스크립트만으로 캔버스를 동적으로 만들어 그래프, 게임, 이미지 편집 등 다양한 용도로 활용할 수 있습니다.