diff --git a/README.md b/README.md
index a7dae08..c6f0dfd 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,7 @@ The table below lists current Nokhwa API support.
  | OpenCV(`input-opencv`)^         | ✅                 | ❌                 | ❌                 | Linux, Windows, Mac |
  | IPCamera(`input-ipcam`/OpenCV)^ | ✅                 | ❌                 | ❌                 | Linux, Windows, Mac |
  | GStreamer(`input-gst`)          | ✅                 | ✅                 | ✅                 | Linux, Windows, Mac |
- | JS/WASM(`input-wasm`)           | 🔮                 | 🔮                 | 🔮                 | Browser(Web)        |
+ | JS/WASM(`input-wasm`)           | ✅                 | ✅                 | ✅                 | Browser(Web)        |
 
  ✅: Working, 🔮 : Experimental, ❌ : Not Supported, 🚧: Planned/WIP
 
diff --git a/examples/jscam/package.json b/examples/jscam/package.json
index 1f95b5a..f270c0e 100644
--- a/examples/jscam/package.json
+++ b/examples/jscam/package.json
@@ -16,6 +16,6 @@
   "devDependencies": {
     "webpack": "^5.51.1",
     "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.0.0"
+    "webpack-dev-server": "^4.1.0"
   }
 }
diff --git a/nokhwajs/nokhwa.d.ts b/nokhwajs/nokhwa.d.ts
index 3afd303..bac6606 100644
--- a/nokhwajs/nokhwa.d.ts
+++ b/nokhwajs/nokhwa.d.ts
@@ -516,7 +516,7 @@ export class CameraInfo {
 /**
 * A wrapper around a [`MediaStream`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.MediaStream.html)
 * # JS-WASM
-* This is exported as `NOKCamera`.
+* This is exported as `NokhwaCamera`.
 */
 export class NokhwaCamera {
   free(): void;
@@ -526,7 +526,7 @@ export class NokhwaCamera {
 * # Errors
 * This may error if permission is not granted, or the constraints are invalid.
 * # JS-WASM
-* This is the constructor for `NOKCamera`. It returns a promise and may throw an error.
+* This is the constructor for `NokhwaCamera`. It returns a promise and may throw an error.
 * @param {CameraConstraints} constraints
 */
   constructor(constraints: CameraConstraints);
@@ -582,16 +582,29 @@ export class NokhwaCamera {
 */
   captureFrameRawData(): Uint8Array;
 /**
-* Attaches camera to a `element`(by-id).
-* - `generate_new`: Whether to add a video element to provided element to attach to. Set this to `false` if the `element` ID you are passing is already a `<video>` element.
+* Copies camera frame to a `html_id`(by-id, canvas).
+*
+* If `generate_new` is true, the generated element will have an Id of `html_id`+`-canvas`. For example, if you pass "nokhwaisbest" for `html_id`, the new `<canvas>`'s ID will be "nokhwaisbest-canvas".
+* # Errors
+* If the internal canvas is not here, drawing fails, or a cast fails, this will error.
+* # JS-WASM
+* This is exported as `copyToCanvas`. It may error.
+* @param {string} html_id
+* @param {boolean} generate_new
+*/
+  copyToCanvas(html_id: string, generate_new: boolean): void;
+/**
+* Attaches camera to a `html_id`(by-id).
+*
+* If `generate_new` is true, the generated element will have an Id of `html_id`+`-video`. For example, if you pass "nokhwaisbest" for `html_id`, the new `<video>`'s ID will be "nokhwaisbest-video".
 * # Errors
 * If the camera fails to attach, fails to generate the video element, or a cast fails, this will error.
 * # JS-WASM
 * This is exported as `attachToElement`. It may throw an error.
-* @param {string} element
+* @param {string} html_id
 * @param {boolean} generate_new
 */
-  attachToElement(element: string, generate_new: boolean): void;
+  attachToElement(html_id: string, generate_new: boolean): void;
 /**
 * Detaches the camera from the `<video>` node.
 * # Errors
@@ -765,6 +778,7 @@ export interface InitOutput {
   readonly nokhwacamera_captureImageData: (a: number) => number;
   readonly nokhwacamera_captureImageURI: (a: number, b: number, c: number, d: number, e: number) => void;
   readonly nokhwacamera_captureFrameRawData: (a: number, b: number) => void;
+  readonly nokhwacamera_copyToCanvas: (a: number, b: number, c: number, d: number) => void;
   readonly nokhwacamera_attachToElement: (a: number, b: number, c: number, d: number) => void;
   readonly nokhwacamera_detachCamera: (a: number) => void;
   readonly nokhwacamera_stopAll: (a: number) => void;
@@ -792,11 +806,11 @@ export interface InitOutput {
   readonly __wbindgen_malloc: (a: number) => number;
   readonly __wbindgen_realloc: (a: number, b: number, c: number) => number;
   readonly __wbindgen_export_2: WebAssembly.Table;
-  readonly _dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__ha79fab5af65c7d0b: (a: number, b: number, c: number) => void;
+  readonly _dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h34bdc8cc85c4eb6b: (a: number, b: number, c: number) => void;
   readonly __wbindgen_add_to_stack_pointer: (a: number) => number;
   readonly __wbindgen_free: (a: number, b: number) => void;
   readonly __wbindgen_exn_store: (a: number) => void;
-  readonly wasm_bindgen__convert__closures__invoke2_mut__hf03b20e2f7b10743: (a: number, b: number, c: number, d: number) => void;
+  readonly wasm_bindgen__convert__closures__invoke2_mut__h138614ba43225cc0: (a: number, b: number, c: number, d: number) => void;
 }
 
 /**
diff --git a/nokhwajs/nokhwa.js b/nokhwajs/nokhwa.js
index dd605bb..9217551 100644
--- a/nokhwajs/nokhwa.js
+++ b/nokhwajs/nokhwa.js
@@ -211,7 +211,7 @@ function makeMutClosure(arg0, arg1, dtor, f) {
     return real;
 }
 function __wbg_adapter_26(arg0, arg1, arg2) {
-    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__ha79fab5af65c7d0b(arg0, arg1, addHeapObject(arg2));
+    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h34bdc8cc85c4eb6b(arg0, arg1, addHeapObject(arg2));
 }
 
 /**
@@ -278,8 +278,8 @@ function passArray8ToWasm0(arg, malloc) {
     WASM_VECTOR_LEN = arg.length;
     return ptr;
 }
-function __wbg_adapter_229(arg0, arg1, arg2, arg3) {
-    wasm.wasm_bindgen__convert__closures__invoke2_mut__hf03b20e2f7b10743(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
+function __wbg_adapter_240(arg0, arg1, arg2, arg3) {
+    wasm.wasm_bindgen__convert__closures__invoke2_mut__h138614ba43225cc0(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
 }
 
 /**
@@ -1329,7 +1329,7 @@ export class CameraInfo {
 /**
 * A wrapper around a [`MediaStream`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.MediaStream.html)
 * # JS-WASM
-* This is exported as `NOKCamera`.
+* This is exported as `NokhwaCamera`.
 */
 export class NokhwaCamera {
 
@@ -1357,7 +1357,7 @@ export class NokhwaCamera {
     * # Errors
     * This may error if permission is not granted, or the constraints are invalid.
     * # JS-WASM
-    * This is the constructor for `NOKCamera`. It returns a promise and may throw an error.
+    * This is the constructor for `NokhwaCamera`. It returns a promise and may throw an error.
     * @param {CameraConstraints} constraints
     */
     constructor(constraints) {
@@ -1499,17 +1499,34 @@ export class NokhwaCamera {
         }
     }
     /**
-    * Attaches camera to a `element`(by-id).
-    * - `generate_new`: Whether to add a video element to provided element to attach to. Set this to `false` if the `element` ID you are passing is already a `<video>` element.
+    * Copies camera frame to a `html_id`(by-id, canvas).
+    *
+    * If `generate_new` is true, the generated element will have an Id of `html_id`+`-canvas`. For example, if you pass "nokhwaisbest" for `html_id`, the new `<canvas>`'s ID will be "nokhwaisbest-canvas".
+    * # Errors
+    * If the internal canvas is not here, drawing fails, or a cast fails, this will error.
+    * # JS-WASM
+    * This is exported as `copyToCanvas`. It may error.
+    * @param {string} html_id
+    * @param {boolean} generate_new
+    */
+    copyToCanvas(html_id, generate_new) {
+        var ptr0 = passStringToWasm0(html_id, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        var len0 = WASM_VECTOR_LEN;
+        wasm.nokhwacamera_copyToCanvas(this.ptr, ptr0, len0, generate_new);
+    }
+    /**
+    * Attaches camera to a `html_id`(by-id).
+    *
+    * If `generate_new` is true, the generated element will have an Id of `html_id`+`-video`. For example, if you pass "nokhwaisbest" for `html_id`, the new `<video>`'s ID will be "nokhwaisbest-video".
     * # Errors
     * If the camera fails to attach, fails to generate the video element, or a cast fails, this will error.
     * # JS-WASM
     * This is exported as `attachToElement`. It may throw an error.
-    * @param {string} element
+    * @param {string} html_id
     * @param {boolean} generate_new
     */
-    attachToElement(element, generate_new) {
-        var ptr0 = passStringToWasm0(element, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    attachToElement(html_id, generate_new) {
+        var ptr0 = passStringToWasm0(html_id, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
         var len0 = WASM_VECTOR_LEN;
         wasm.nokhwacamera_attachToElement(this.ptr, ptr0, len0, generate_new);
     }
@@ -1727,6 +1744,10 @@ async function init(input) {
         var ret = getObject(arg0).navigator;
         return addHeapObject(ret);
     };
+    imports.wbg.__wbg_body_525168d9e773c3f8 = function(arg0) {
+        var ret = getObject(arg0).body;
+        return isLikeNone(ret) ? 0 : addHeapObject(ret);
+    };
     imports.wbg.__wbg_createElement_ac65a6ce60c4812c = function() { return handleError(function (arg0, arg1, arg2) {
         var ret = getObject(arg0).createElement(getStringFromWasm0(arg1, arg2));
         return addHeapObject(ret);
@@ -1751,6 +1772,10 @@ async function init(input) {
         var ret = getObject(arg0).appendChild(getObject(arg1));
         return addHeapObject(ret);
     }, arguments) };
+    imports.wbg.__wbg_removeChild_f633f19eb895b696 = function() { return handleError(function (arg0, arg1) {
+        var ret = getObject(arg0).removeChild(getObject(arg1));
+        return addHeapObject(ret);
+    }, arguments) };
     imports.wbg.__wbg_instanceof_MediaDeviceInfo_cdf31c28bb9459ae = function(arg0) {
         var ret = getObject(arg0) instanceof MediaDeviceInfo;
         return ret;
@@ -1785,16 +1810,25 @@ async function init(input) {
         var ret = getObject(arg0).getUserMedia(getObject(arg1));
         return addHeapObject(ret);
     }, arguments) };
+    imports.wbg.__wbg_setid_cea8de140a58c4f1 = function(arg0, arg1, arg2) {
+        getObject(arg0).id = getStringFromWasm0(arg1, arg2);
+    };
     imports.wbg.__wbg_setAttribute_27ca65e30a1c3c4a = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
         getObject(arg0).setAttribute(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
     }, arguments) };
     imports.wbg.__wbg_log_9a99fb1af846153b = function(arg0) {
         console.log(getObject(arg0));
     };
+    imports.wbg.__wbg_sethidden_4e6127e185ecf2df = function(arg0, arg1) {
+        getObject(arg0).hidden = arg1 !== 0;
+    };
     imports.wbg.__wbg_instanceof_CanvasRenderingContext2d_779e79c4121aa91b = function(arg0) {
         var ret = getObject(arg0) instanceof CanvasRenderingContext2D;
         return ret;
     };
+    imports.wbg.__wbg_drawImage_1edb91863f89d75c = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5) {
+        getObject(arg0).drawImage(getObject(arg1), arg2, arg3, arg4, arg5);
+    }, arguments) };
     imports.wbg.__wbg_drawImage_13e48c4e7b9bcf28 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5) {
         getObject(arg0).drawImage(getObject(arg1), arg2, arg3, arg4, arg5);
     }, arguments) };
@@ -1928,7 +1962,7 @@ async function init(input) {
                 const a = state0.a;
                 state0.a = 0;
                 try {
-                    return __wbg_adapter_229(a, state0.b, arg0, arg1);
+                    return __wbg_adapter_240(a, state0.b, arg0, arg1);
                 } finally {
                     state0.a = a;
                 }
@@ -1998,7 +2032,7 @@ async function init(input) {
     imports.wbg.__wbindgen_rethrow = function(arg0) {
         throw takeObject(arg0);
     };
-    imports.wbg.__wbindgen_closure_wrapper747 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper761 = function(arg0, arg1, arg2) {
         var ret = makeMutClosure(arg0, arg1, 65, __wbg_adapter_26);
         return addHeapObject(ret);
     };
diff --git a/nokhwajs/nokhwa_bg.wasm b/nokhwajs/nokhwa_bg.wasm
index 83f0a0c..1410f27 100644
Binary files a/nokhwajs/nokhwa_bg.wasm and b/nokhwajs/nokhwa_bg.wasm differ
diff --git a/nokhwajs/nokhwa_bg.wasm.d.ts b/nokhwajs/nokhwa_bg.wasm.d.ts
index 001225c..f0cc9b6 100644
--- a/nokhwajs/nokhwa_bg.wasm.d.ts
+++ b/nokhwajs/nokhwa_bg.wasm.d.ts
@@ -80,6 +80,7 @@ export function nokhwacamera_media_stream(a: number): number;
 export function nokhwacamera_captureImageData(a: number): number;
 export function nokhwacamera_captureImageURI(a: number, b: number, c: number, d: number, e: number): void;
 export function nokhwacamera_captureFrameRawData(a: number, b: number): void;
+export function nokhwacamera_copyToCanvas(a: number, b: number, c: number, d: number): void;
 export function nokhwacamera_attachToElement(a: number, b: number, c: number, d: number): void;
 export function nokhwacamera_detachCamera(a: number): void;
 export function nokhwacamera_stopAll(a: number): void;
@@ -107,8 +108,8 @@ export function resolution_y(a: number): number;
 export function __wbindgen_malloc(a: number): number;
 export function __wbindgen_realloc(a: number, b: number, c: number): number;
 export const __wbindgen_export_2: WebAssembly.Table;
-export function _dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__ha79fab5af65c7d0b(a: number, b: number, c: number): void;
+export function _dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h34bdc8cc85c4eb6b(a: number, b: number, c: number): void;
 export function __wbindgen_add_to_stack_pointer(a: number): number;
 export function __wbindgen_free(a: number, b: number): void;
 export function __wbindgen_exn_store(a: number): void;
-export function wasm_bindgen__convert__closures__invoke2_mut__hf03b20e2f7b10743(a: number, b: number, c: number, d: number): void;
+export function wasm_bindgen__convert__closures__invoke2_mut__h138614ba43225cc0(a: number, b: number, c: number, d: number): void;
diff --git a/nokhwajs/package.json b/nokhwajs/package.json
index 294b447..faaebf1 100644
--- a/nokhwajs/package.json
+++ b/nokhwajs/package.json
@@ -4,7 +4,7 @@
     "l1npengtul <l1npengtul@protonmail.com>"
   ],
   "description": "A Simple-to-use, cross-platform Rust Webcam Capture Library",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "license": "MPL-2.0",
   "repository": {
     "type": "git",
diff --git a/src/js_camera.rs b/src/js_camera.rs
index cbf393c..33a461c 100644
--- a/src/js_camera.rs
+++ b/src/js_camera.rs
@@ -24,9 +24,9 @@ use wasm_bindgen::prelude::wasm_bindgen;
 use wasm_bindgen::{JsCast, JsValue};
 use wasm_bindgen_futures::JsFuture;
 use web_sys::{
-    CanvasRenderingContext2d, Document, Element, HtmlCanvasElement, HtmlVideoElement, ImageData,
-    MediaDeviceInfo, MediaDeviceKind, MediaDevices, MediaStream, MediaStreamConstraints,
-    MediaStreamTrack, MediaStreamTrackState, Navigator, Node, Window,
+    console::log_1, CanvasRenderingContext2d, Document, Element, HtmlCanvasElement,
+    HtmlVideoElement, ImageData, MediaDeviceInfo, MediaDeviceKind, MediaDevices, MediaStream,
+    MediaStreamConstraints, MediaStreamTrack, MediaStreamTrackState, Navigator, Node, Window,
 };
 #[cfg(feature = "output-wgpu")]
 use wgpu::{
@@ -1663,7 +1663,8 @@ pub struct JSCamera {
     attached: bool,
     attached_node: Option<Node>,
     measured_resolution: Resolution,
-    hidden_canvas: Option<HtmlCanvasElement>,
+    attached_canvas: Option<HtmlCanvasElement>,
+    canvas_context: Option<CanvasRenderingContext2d>,
 }
 
 #[cfg_attr(feature = "output-wasm", wasm_bindgen(js_class = NokhwaCamera))]
@@ -1818,16 +1819,38 @@ impl JSCamera {
             Err(why) => Err(JsValue::from(why.to_string())),
         }
     }
-    /// Attaches camera to a `element`(by-id).
-    /// - `generate_new`: Whether to add a video element to provided element to attach to. Set this to `false` if the `element` ID you are passing is already a `<video>` element.
+
+    /// Copies camera frame to a `html_id`(by-id, canvas).
+    ///
+    /// If `generate_new` is true, the generated element will have an Id of `html_id`+`-canvas`. For example, if you pass "nokhwaisbest" for `html_id`, the new `<canvas>`'s ID will be "nokhwaisbest-canvas".
+    /// # Errors
+    /// If the internal canvas is not here, drawing fails, or a cast fails, this will error.
+    /// # JS-WASM
+    /// This is exported as `copyToCanvas`. It may error.
+    #[cfg(feature = "output-wasm")]
+    #[cfg_attr(feature = "output-wasm", wasm_bindgen(js_name = copyToCanvas))]
+    pub fn js_frame_canvas_copy(
+        &mut self,
+        html_id: &str,
+        generate_new: bool,
+    ) -> Result<(), JsValue> {
+        match self.frame_canvas_copy(html_id, generate_new) {
+            Ok(_) => Ok(()),
+            Err(why) => Err(JsValue::from(why.to_string())),
+        }
+    }
+
+    /// Attaches camera to a `html_id`(by-id).
+    ///
+    /// If `generate_new` is true, the generated element will have an Id of `html_id`+`-video`. For example, if you pass "nokhwaisbest" for `html_id`, the new `<video>`'s ID will be "nokhwaisbest-video".
     /// # Errors
     /// If the camera fails to attach, fails to generate the video element, or a cast fails, this will error.
     /// # JS-WASM
     /// This is exported as `attachToElement`. It may throw an error.
     #[cfg(feature = "output-wasm")]
     #[cfg_attr(feature = "output-wasm", wasm_bindgen(js_name = attachToElement))]
-    pub fn js_attach(&mut self, element: &str, generate_new: bool) -> Result<(), JsValue> {
-        if let Err(why) = self.attach(element, generate_new) {
+    pub fn js_attach(&mut self, html_id: &str, generate_new: bool) -> Result<(), JsValue> {
+        if let Err(why) = self.attach(html_id, generate_new) {
             return Err(JsValue::from(why.to_string()));
         }
         Ok(())
@@ -1901,7 +1924,8 @@ impl JSCamera {
             attached: false,
             attached_node: None,
             measured_resolution: Resolution::new(0, 0),
-            hidden_canvas: None,
+            attached_canvas: None,
+            canvas_context: None,
         };
         js_camera.measure_resolution()?;
 
@@ -1991,14 +2015,16 @@ impl JSCamera {
         Err(NokhwaError::ReadFrameError("Null Stream".to_string()))
     }
 
-    /// Attaches camera to a `element`(by-id).
+    /// Attaches camera to a `html_id`(by-id).
+    ///
+    /// If `generate_new` is true, the generated element will have an Id of `html_id`+`-video`. For example, if you pass "nokhwaisbest" for `html_id`, the new `<video>`'s ID will be "nokhwaisbest-video".
     /// # Errors
     /// If the camera fails to attach, fails to generate the video element, or a cast fails, this will error.
-    pub fn attach(&mut self, element: &str, generate_new: bool) -> Result<(), NokhwaError> {
+    pub fn attach(&mut self, html_id: &str, generate_new: bool) -> Result<(), NokhwaError> {
         let window: Window = window()?;
         let document: Document = document(&window)?;
 
-        let selected_element: Element = document_select_elem(&document, element)?;
+        let selected_element: Element = document_select_elem(&document, html_id)?;
         self.measure_resolution()?;
 
         if generate_new {
@@ -2012,6 +2038,7 @@ impl JSCamera {
             video_element.set_width(self.resolution().width());
             video_element.set_height(self.resolution().height());
             video_element.set_src_object(Some(&self.media_stream()));
+            video_element.set_id(&format!("{}-video", html_id));
 
             return match selected_element.append_child(&Node::from(video_element)) {
                 Ok(n) => {
@@ -2067,7 +2094,8 @@ impl JSCamera {
         let window: Window = window()?;
         let document: Document = document(&window)?;
         self.measure_resolution()?;
-        if self.hidden_canvas.is_none() {
+
+        if self.attached_canvas.is_none() {
             let canvas = create_element(&document, "canvas")?;
 
             match document.body() {
@@ -2086,13 +2114,34 @@ impl JSCamera {
                 }
             }
 
-            self.hidden_canvas = Some(element_cast::<Element, HtmlCanvasElement>(
-                canvas,
-                "HtmlCanvasElement",
-            )?);
+            let canvas = element_cast::<Element, HtmlCanvasElement>(canvas, "HtmlCanvasElement")?;
+            canvas.set_hidden(true);
+
+            self.canvas_context = match canvas.get_context("2d") {
+                Ok(maybe_ctx) => match maybe_ctx {
+                    Some(ctx) => Some(element_cast::<Object, CanvasRenderingContext2d>(
+                        ctx,
+                        "CanvasRenderingContext2d",
+                    )?),
+                    None => {
+                        return Err(NokhwaError::StructureError {
+                            structure: "HtmlCanvasElement Context 2D".to_string(),
+                            error: "None".to_string(),
+                        });
+                    }
+                },
+                Err(why) => {
+                    return Err(NokhwaError::StructureError {
+                        structure: "HtmlCanvasElement Context 2D".to_string(),
+                        error: format!("{:?}", why),
+                    });
+                }
+            };
+
+            self.attached_canvas = Some(canvas);
         }
 
-        let canvas = match &self.hidden_canvas {
+        let canvas = match &self.attached_canvas {
             Some(canvas) => canvas,
             None => {
                 // shouldn't happen
@@ -2105,26 +2154,14 @@ impl JSCamera {
 
         canvas.set_width(self.resolution().width());
         canvas.set_height(self.resolution().height());
-        canvas.set_hidden(true);
 
-        let context = match canvas.get_context("2d") {
-            Ok(maybe_ctx) => match maybe_ctx {
-                Some(ctx) => element_cast::<Object, CanvasRenderingContext2d>(
-                    ctx,
-                    "CanvasRenderingContext2d",
-                )?,
-                None => {
-                    return Err(NokhwaError::StructureError {
-                        structure: "HtmlCanvasElement Context 2D".to_string(),
-                        error: "None".to_string(),
-                    });
-                }
-            },
-            Err(why) => {
+        let context = match &self.canvas_context {
+            Some(cc) => cc,
+            None => {
                 return Err(NokhwaError::StructureError {
-                    structure: "HtmlCanvasElement Context 2D".to_string(),
-                    error: format!("{:?}", why),
-                });
+                    structure: "CanvasContext".to_string(),
+                    error: "None".to_string(),
+                })
             }
         };
 
@@ -2140,10 +2177,6 @@ impl JSCamera {
                 }
             };
 
-            video_element.set_width(self.resolution().width());
-            video_element.set_height(self.resolution().height());
-            video_element.set_src_object(Some(&self.media_stream()));
-
             if let Err(why) = context.draw_image_with_html_video_element_and_dw_and_dh(
                 video_element,
                 0_f64,
@@ -2153,6 +2186,18 @@ impl JSCamera {
             ) {
                 return Err(NokhwaError::ReadFrameError(format!("{:?}", why)));
             }
+
+            match context.get_image_data(
+                0_f64,
+                0_f64,
+                self.resolution().width().into(),
+                self.resolution().height().into(),
+            ) {
+                Ok(data) => log_1(&jsv!(data)),
+                Err(why) => {
+                    return Err(NokhwaError::ReadFrameError(format!("{:?}", why)));
+                }
+            };
         } else {
             let video_element = match document.create_element("video") {
                 Ok(new_element) => new_element,
@@ -2216,9 +2261,145 @@ impl JSCamera {
                 }
             }
         }
+
         Ok(())
     }
 
+    /// Copies camera frame to a `html_id`(by-id, canvas).
+    ///
+    /// If `generate_new` is true, the generated element will have an Id of `html_id`+`-canvas`. For example, if you pass "nokhwaisbest" for `html_id`, the new `<canvas>`'s ID will be "nokhwaisbest-canvas".
+    /// # Errors
+    /// If the internal canvas is not here, drawing fails, or a cast fails, this will error.
+    #[allow(clippy::must_use_candidate)]
+    pub fn frame_canvas_copy(
+        &mut self,
+        html_id: &str,
+        generate_new: bool,
+    ) -> Result<(HtmlCanvasElement, CanvasRenderingContext2d), NokhwaError> {
+        let window: Window = window()?;
+        let document: Document = document(&window)?;
+
+        let selected_element: Element = document_select_elem(&document, html_id)?;
+        self.measure_resolution()?;
+        self.draw_to_canvas()?;
+
+        if generate_new {
+            let new_canvas = create_element(&document, "canvas")?;
+            let new_canvas =
+                element_cast::<Element, HtmlCanvasElement>(new_canvas, "HtmlCanvasElement")?;
+
+            new_canvas.set_width(self.resolution().width());
+            new_canvas.set_height(self.resolution().height());
+            new_canvas.set_id(&format!("{}-canvas", html_id));
+
+            if let Err(why) = selected_element.append_child(&new_canvas) {
+                return Err(NokhwaError::StructureError {
+                    structure: "HtmlCanvasElement".to_string(),
+                    error: format!("add child: {:?}", why),
+                });
+            }
+
+            let context = match new_canvas.get_context("2d") {
+                Ok(objcontext) => match objcontext {
+                    Some(c2d) => c2d,
+                    None => {
+                        return Err(NokhwaError::StructureError {
+                            structure: "CanvasRenderingContext2d".to_string(),
+                            error: "No context".to_string(),
+                        });
+                    }
+                },
+                Err(why) => {
+                    return Err(NokhwaError::StructureError {
+                        structure: "CanvasRenderingContext2d".to_string(),
+                        error: format!("context: {:?}", why),
+                    });
+                }
+            };
+
+            let self_canvas = match &self.attached_canvas {
+                Some(c) => c,
+                None => {
+                    return Err(NokhwaError::StructureError {
+                        structure: "HtmlCanvasElement".to_string(),
+                        error: "Is None?".to_string(),
+                    });
+                }
+            };
+
+            let context = element_cast::<Object, CanvasRenderingContext2d>(
+                context,
+                "CanvasRenderingContext2d",
+            )?;
+
+            if let Err(why) = context.draw_image_with_html_canvas_element_and_dw_and_dh(
+                self_canvas,
+                0_f64,
+                0_f64,
+                self.resolution().width().into(),
+                self.resolution().height().into(),
+            ) {
+                return Err(NokhwaError::ReadFrameError(format!(
+                    "Failed to draw: {:?}",
+                    why
+                )));
+            }
+
+            Ok((new_canvas, context))
+        } else {
+            let canvas =
+                element_cast::<Element, HtmlCanvasElement>(selected_element, "HtmlCanvasElement")?;
+
+            let context = match canvas.get_context("2d") {
+                Ok(objcontext) => match objcontext {
+                    Some(c2d) => c2d,
+                    None => {
+                        return Err(NokhwaError::StructureError {
+                            structure: "CanvasRenderingContext2d".to_string(),
+                            error: "No context".to_string(),
+                        });
+                    }
+                },
+                Err(why) => {
+                    return Err(NokhwaError::StructureError {
+                        structure: "CanvasRenderingContext2d".to_string(),
+                        error: format!("context: {:?}", why),
+                    });
+                }
+            };
+
+            let self_canvas = match &self.attached_canvas {
+                Some(c) => c,
+                None => {
+                    return Err(NokhwaError::StructureError {
+                        structure: "HtmlCanvasElement".to_string(),
+                        error: "Is None?".to_string(),
+                    });
+                }
+            };
+
+            let context = element_cast::<Object, CanvasRenderingContext2d>(
+                context,
+                "CanvasRenderingContext2d",
+            )?;
+
+            if let Err(why) = context.draw_image_with_html_canvas_element_and_dw_and_dh(
+                self_canvas,
+                0_f64,
+                0_f64,
+                self.resolution().width().into(),
+                self.resolution().height().into(),
+            ) {
+                return Err(NokhwaError::ReadFrameError(format!(
+                    "Failed to draw: {:?}",
+                    why
+                )));
+            }
+
+            Ok((canvas, context))
+        }
+    }
+
     /// Captures an [`ImageData`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.ImageData.html) [`MDN`](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) by drawing the image to a non-existent canvas.
     /// It is greatly advised to call this after calling attach to reduce DOM overhead.
     ///
@@ -2227,29 +2408,13 @@ impl JSCamera {
     pub fn frame_image_data(&mut self) -> Result<ImageData, NokhwaError> {
         self.draw_to_canvas()?;
 
-        let canvas = match self.hidden_canvas {
-            Some(c) => c,
-            None => return Err(NokhwaError::ReadFrameError("No Canvas".to_string())),
-        };
-
-        let context = match canvas.get_context("2d") {
-            Ok(maybe_ctx) => match maybe_ctx {
-                Some(ctx) => element_cast::<Object, CanvasRenderingContext2d>(
-                    ctx,
-                    "CanvasRenderingContext2d",
-                )?,
-                None => {
-                    return Err(NokhwaError::StructureError {
-                        structure: "HtmlCanvasElement Context 2D".to_string(),
-                        error: "None".to_string(),
-                    });
-                }
-            },
-            Err(why) => {
+        let context = match &self.canvas_context {
+            Some(cc) => cc,
+            None => {
                 return Err(NokhwaError::StructureError {
-                    structure: "HtmlCanvasElement Context 2D".to_string(),
-                    error: format!("{:?}", why),
-                });
+                    structure: "CanvasContext".to_string(),
+                    error: "None".to_string(),
+                })
             }
         };
 
@@ -2284,7 +2449,7 @@ impl JSCamera {
         let image_quality = JsValue::from(image_quality.unwrap_or(0.92_f64));
         self.draw_to_canvas()?;
 
-        let canvas = match self.hidden_canvas {
+        let canvas = match &self.attached_canvas {
             Some(c) => c,
             None => return Err(NokhwaError::ReadFrameError("No Canvas".to_string())),
         };