diff --git a/README.md b/README.md
index 917b247..09176db 100644
--- a/README.md
+++ b/README.md
@@ -18,9 +18,10 @@ Three.js powered Minecraft skin viewer.
 # Usage
 [Example of using skinview3d](https://bs-community.github.io/skinview3d/)
 ```html
-<div id="skin_container"></div>
+<canvas id="skin_container"></canvas>
 <script>
-	let skinViewer = new skinview3d.SkinViewer(document.getElementById("skin_container"), {
+	let skinViewer = new skinview3d.SkinViewer({
+		canvas: document.getElementById("skin_container"),
 		width: 300,
 		height: 400,
 		skin: "img/skin.png"
@@ -73,9 +74,10 @@ It's recommended to use an opaque background when FXAA is enabled,
 as transparent background may look buggy.
 
 ```javascript
-let skinViewer = new skinview3d.FXAASkinViewer(document.getElementById("skin_container"), {
+let skinViewer = new skinview3d.FXAASkinViewer({
 	// we do not use transparent background, so disable alpha to improve performance
-	alpha: false
+	alpha: false,
+	...
 });
 // set the background color
 skinViewer.renderer.setClearColor(0x5a76f3);
diff --git a/examples/index.html b/examples/index.html
index eeb5dd7..c475937 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -101,7 +101,7 @@
 
 <body>
 
-	<div id="skin_container"></div>
+	<canvas id="skin_container"></canvas>
 
 	<div class="controls">
 
@@ -371,7 +371,8 @@
 		}
 
 		function initializeViewer() {
-			skinViewer = new skinview3d.FXAASkinViewer(document.getElementById("skin_container"), {
+			skinViewer = new skinview3d.FXAASkinViewer({
+				canvas: document.getElementById("skin_container"),
 				alpha: false
 			});
 			skinViewer.renderer.setClearColor(0x5a76f3);
diff --git a/src/fxaa.ts b/src/fxaa.ts
index a0b154c..86ae9eb 100644
--- a/src/fxaa.ts
+++ b/src/fxaa.ts
@@ -10,8 +10,8 @@ export class FXAASkinViewer extends SkinViewer {
     readonly renderPass: RenderPass;
     readonly fxaaPass: ShaderPass;
 
-    constructor(domElement: Node, options: SkinViewerOptions = {}) {
-        super(domElement, options);
+    constructor(options: SkinViewerOptions = {}) {
+        super(options);
         this.composer = new EffectComposer(this.renderer);
         this.renderPass = new RenderPass(this.scene, this.camera);
         this.fxaaPass = new ShaderPass(FXAAShader);
diff --git a/src/viewer.ts b/src/viewer.ts
index 5ce2397..ce26bac 100644
--- a/src/viewer.ts
+++ b/src/viewer.ts
@@ -16,6 +16,7 @@ export type SkinViewerOptions = {
 	skin?: RemoteImage | TextureSource;
 	cape?: RemoteImage | TextureSource;
 	alpha?: boolean;
+	canvas?: HTMLCanvasElement;
 }
 
 function toMakeVisible(options?: LoadOptions): boolean {
@@ -26,7 +27,7 @@ function toMakeVisible(options?: LoadOptions): boolean {
 }
 
 class SkinViewer {
-	readonly domElement: Node;
+	readonly canvas: HTMLCanvasElement;
 	readonly scene: Scene;
 	readonly camera: PerspectiveCamera;
 	readonly renderer: WebGLRenderer;
@@ -41,8 +42,8 @@ class SkinViewer {
 	private _disposed: boolean = false;
 	private _renderPaused: boolean = false;
 
-	constructor(domElement: Node, options: SkinViewerOptions = {}) {
-		this.domElement = domElement;
+	constructor(options: SkinViewerOptions = {}) {
+		this.canvas = options.canvas === undefined ? document.createElement("canvas") : options.canvas;
 
 		// texture
 		this.skinCanvas = document.createElement("canvas");
@@ -63,11 +64,11 @@ class SkinViewer {
 		this.camera.position.z = 60;
 
 		this.renderer = new WebGLRenderer({
+			canvas: this.canvas,
 			alpha: options.alpha !== false, // alpha is on by default
 			preserveDrawingBuffer: true
 		});
 		this.renderer.setPixelRatio(window.devicePixelRatio);
-		this.domElement.appendChild(this.renderer.domElement);
 
 		this.playerObject = new PlayerObject(this.skinTexture, this.capeTexture);
 		this.playerObject.name = "player";
@@ -135,7 +136,6 @@ class SkinViewer {
 
 	dispose(): void {
 		this._disposed = true;
-		this.domElement.removeChild(this.renderer.domElement);
 		this.renderer.dispose();
 		this.skinTexture.dispose();
 		this.capeTexture.dispose();
