Skip to main content

script/dom/html/
htmlcanvaselement.rs

1/* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
4
5use std::cell::{Cell, RefCell};
6use std::rc::Rc;
7
8use dom_struct::dom_struct;
9use euclid::default::Size2D;
10use html5ever::{LocalName, Prefix, local_name, ns};
11use js::error::throw_type_error;
12use js::rust::{HandleObject, HandleValue};
13use layout_api::HTMLCanvasData;
14use pixels::{EncodedImageType, Snapshot};
15use rustc_hash::FxHashMap;
16use script_bindings::cell::{DomRefCell, Ref};
17use script_bindings::reflector::DomObject;
18use script_bindings::weakref::WeakRef;
19use servo_base::Epoch;
20use servo_canvas_traits::webgl::{GLContextAttributes, WebGLVersion};
21use servo_constellation_traits::BlobImpl;
22#[cfg(feature = "webgpu")]
23use servo_constellation_traits::ScriptToConstellationMessage;
24use servo_media::streams::MediaStreamType;
25use servo_media::streams::registry::MediaStreamId;
26use style::attr::AttrValue;
27use webrender_api::ImageKey;
28
29use crate::canvas_context::{CanvasContext, RenderingContext};
30use crate::conversions::Convert;
31use crate::dom::bindings::callback::ExceptionHandling;
32use crate::dom::bindings::codegen::Bindings::HTMLCanvasElementBinding::{
33    BlobCallback, HTMLCanvasElementMethods, RenderingContext as RootedRenderingContext,
34};
35use crate::dom::bindings::codegen::Bindings::MediaStreamBinding::MediaStreamMethods;
36use crate::dom::bindings::codegen::Bindings::WebGLRenderingContextBinding::WebGLContextAttributes;
37use crate::dom::bindings::codegen::UnionTypes::HTMLCanvasElementOrOffscreenCanvas as RootedHTMLCanvasElementOrOffscreenCanvas;
38use crate::dom::bindings::conversions::ConversionResult;
39use crate::dom::bindings::error::{Error, Fallible};
40use crate::dom::bindings::inheritance::Castable;
41use crate::dom::bindings::num::Finite;
42use crate::dom::bindings::refcounted::Trusted;
43use crate::dom::bindings::reflector::DomGlobal;
44use crate::dom::bindings::root::{Dom, DomRoot, LayoutDom};
45use crate::dom::bindings::str::{DOMString, USVString};
46use crate::dom::blob::Blob;
47use crate::dom::canvasrenderingcontext2d::CanvasRenderingContext2D;
48use crate::dom::document::Document;
49use crate::dom::element::attributes::storage::AttrRef;
50use crate::dom::element::{AttributeMutation, Element};
51#[cfg(not(feature = "webgpu"))]
52use crate::dom::gpucanvascontext::GPUCanvasContext;
53use crate::dom::html::htmlelement::HTMLElement;
54use crate::dom::imagebitmaprenderingcontext::ImageBitmapRenderingContext;
55use crate::dom::mediastream::MediaStream;
56use crate::dom::mediastreamtrack::MediaStreamTrack;
57use crate::dom::node::virtualmethods::VirtualMethods;
58use crate::dom::node::{Node, NodeDamage, NodeTraits};
59use crate::dom::offscreencanvas::OffscreenCanvas;
60use crate::dom::values::UNSIGNED_LONG_MAX;
61use crate::dom::webgl::webgl2renderingcontext::WebGL2RenderingContext;
62use crate::dom::webgl::webglrenderingcontext::WebGLRenderingContext;
63#[cfg(feature = "webgpu")]
64use crate::dom::webgpu::gpucanvascontext::GPUCanvasContext;
65
66const DEFAULT_WIDTH: u32 = 300;
67const DEFAULT_HEIGHT: u32 = 150;
68
69/// <https://html.spec.whatwg.org/multipage/#htmlcanvaselement>
70#[dom_struct]
71pub(crate) struct HTMLCanvasElement {
72    htmlelement: HTMLElement,
73
74    /// <https://html.spec.whatwg.org/multipage/#concept-canvas-context-mode>
75    context_mode: DomRefCell<Option<RenderingContext>>,
76
77    /// This id along with [`Self::blob_callbacks`] are used to keep track of ongoing toBlob() calls.
78    callback_id: Cell<u32>,
79
80    /// This hashmap along with [`Self::callback_id`] are used to keep track of ongoing toBlob() calls.
81    #[conditional_malloc_size_of]
82    blob_callbacks: RefCell<FxHashMap<u32, Rc<BlobCallback>>>,
83
84    /// The [`ImageKey`] used to render this [`HTMLCanvasElement`] to the WebRender scene, if it
85    /// has a `RenderingContext`, otherwise `None`. Note that this key is owned by the `RenderingContext`
86    /// itself which will take care of cleaning it up.
87    #[no_trace]
88    image_key: Cell<Option<ImageKey>>,
89}
90
91impl HTMLCanvasElement {
92    fn new_inherited(
93        local_name: LocalName,
94        prefix: Option<Prefix>,
95        document: &Document,
96    ) -> HTMLCanvasElement {
97        HTMLCanvasElement {
98            htmlelement: HTMLElement::new_inherited(local_name, prefix, document),
99            context_mode: DomRefCell::new(None),
100            callback_id: Cell::new(0),
101            blob_callbacks: RefCell::new(FxHashMap::default()),
102            image_key: Default::default(),
103        }
104    }
105
106    pub(crate) fn new(
107        cx: &mut js::context::JSContext,
108        local_name: LocalName,
109        prefix: Option<Prefix>,
110        document: &Document,
111        proto: Option<HandleObject>,
112    ) -> DomRoot<HTMLCanvasElement> {
113        Node::reflect_node_with_proto(
114            cx,
115            Box::new(HTMLCanvasElement::new_inherited(
116                local_name, prefix, document,
117            )),
118            document,
119            proto,
120        )
121    }
122
123    fn recreate_contexts_after_resize(&self) {
124        if let Some(ref context) = *self.context_mode.borrow() {
125            context.resize()
126        }
127    }
128
129    pub(crate) fn get_size(&self) -> Size2D<u32> {
130        Size2D::new(self.Width(), self.Height())
131    }
132
133    pub(crate) fn origin_is_clean(&self) -> bool {
134        match *self.context_mode.borrow() {
135            Some(ref context) => context.origin_is_clean(),
136            _ => true,
137        }
138    }
139
140    pub(crate) fn mark_as_dirty(&self) {
141        if let Some(ref context) = *self.context_mode.borrow() {
142            context.mark_as_dirty()
143        }
144    }
145
146    pub(crate) fn set_natural_width(&self, cx: &mut js::context::JSContext, value: u32) {
147        let value = if value > UNSIGNED_LONG_MAX {
148            DEFAULT_WIDTH
149        } else {
150            value
151        };
152        self.upcast::<Element>()
153            .set_attribute(cx, &html5ever::local_name!("width"), value.into());
154    }
155
156    pub(crate) fn set_natural_height(&self, cx: &mut js::context::JSContext, value: u32) {
157        let value = if value > UNSIGNED_LONG_MAX {
158            DEFAULT_HEIGHT
159        } else {
160            value
161        };
162        self.upcast::<Element>()
163            .set_attribute(cx, &html5ever::local_name!("height"), value.into());
164    }
165}
166
167impl LayoutDom<'_, HTMLCanvasElement> {
168    pub(crate) fn data(self) -> HTMLCanvasData {
169        let width_attr = self
170            .upcast::<Element>()
171            .get_attr_for_layout(&ns!(), &local_name!("width"));
172        let height_attr = self
173            .upcast::<Element>()
174            .get_attr_for_layout(&ns!(), &local_name!("height"));
175        HTMLCanvasData {
176            image_key: self.unsafe_get().image_key.get(),
177            width: width_attr.map_or(DEFAULT_WIDTH, |val| val.as_uint()),
178            height: height_attr.map_or(DEFAULT_HEIGHT, |val| val.as_uint()),
179        }
180    }
181}
182
183impl HTMLCanvasElement {
184    pub(crate) fn context(&self) -> Option<Ref<'_, RenderingContext>> {
185        Ref::filter_map(self.context_mode.borrow(), |ctx| ctx.as_ref()).ok()
186    }
187
188    fn set_rendering_context(&self, make_rendering_context: impl FnOnce() -> RenderingContext) {
189        self.upcast::<Node>().dirty(NodeDamage::ContentOrHeritage);
190        self.context_mode
191            .borrow_mut()
192            .replace(make_rendering_context());
193
194        let Some(rendering_context) = &*self.context_mode.borrow() else {
195            return;
196        };
197
198        let get_image_key = || self.owner_window().image_cache().get_image_key();
199        let image_key = match rendering_context {
200            RenderingContext::Placeholder(..) => None,
201            RenderingContext::Context2d(..) => get_image_key(),
202            RenderingContext::BitmapRenderer(..) => get_image_key(),
203            RenderingContext::WebGL(..) => get_image_key(),
204            RenderingContext::WebGL2(..) => get_image_key(),
205            #[cfg(feature = "webgpu")]
206            RenderingContext::WebGPU(..) => get_image_key(),
207        };
208        self.image_key.set(image_key);
209        if let Some(image_key) = image_key {
210            rendering_context.set_image_key(image_key);
211        }
212    }
213
214    fn get_or_init_2d_context(
215        &self,
216        cx: &mut js::context::JSContext,
217    ) -> Option<DomRoot<CanvasRenderingContext2D>> {
218        if let Some(ctx) = self.context() {
219            return match *ctx {
220                RenderingContext::Context2d(ref ctx) => Some(DomRoot::from_ref(ctx)),
221                _ => None,
222            };
223        }
224
225        let window = self.owner_window();
226        let size = self.get_size();
227        let context = CanvasRenderingContext2D::new(cx, window.as_global_scope(), self, size)?;
228        self.set_rendering_context(|| RenderingContext::Context2d(Dom::from_ref(&*context)));
229        Some(context)
230    }
231
232    /// <https://html.spec.whatwg.org/multipage/#canvas-context-bitmaprenderer>
233    fn get_or_init_bitmaprenderer_context(
234        &self,
235        cx: &mut js::context::JSContext,
236    ) -> Option<DomRoot<ImageBitmapRenderingContext>> {
237        // Return the same object as was returned the last time the method was
238        // invoked with this same first argument.
239        if let Some(ctx) = self.context() {
240            return match *ctx {
241                RenderingContext::BitmapRenderer(ref ctx) => Some(DomRoot::from_ref(ctx)),
242                _ => None,
243            };
244        }
245
246        // Step 1. Let context be the result of running the
247        // ImageBitmapRenderingContext creation algorithm given this and
248        // options.
249        let canvas =
250            RootedHTMLCanvasElementOrOffscreenCanvas::HTMLCanvasElement(DomRoot::from_ref(self));
251
252        // Step 2. Set this's context mode to bitmaprenderer.
253        let context = ImageBitmapRenderingContext::new(cx, &self.owner_global(), &canvas);
254        self.set_rendering_context(|| RenderingContext::BitmapRenderer(Dom::from_ref(&*context)));
255
256        // Step 3. Return context.
257        Some(context)
258    }
259
260    fn get_or_init_webgl_context(
261        &self,
262        cx: &mut js::context::JSContext,
263        options: HandleValue,
264    ) -> Option<DomRoot<WebGLRenderingContext>> {
265        if let Some(ctx) = self.context() {
266            return match *ctx {
267                RenderingContext::WebGL(ref ctx) => Some(DomRoot::from_ref(ctx)),
268                _ => None,
269            };
270        }
271        let window = self.owner_window();
272        let canvas =
273            RootedHTMLCanvasElementOrOffscreenCanvas::HTMLCanvasElement(DomRoot::from_ref(self));
274        let size = self.get_size();
275        let attrs = Self::get_gl_attributes(cx, options)?;
276        let context =
277            WebGLRenderingContext::new(cx, &window, &canvas, WebGLVersion::WebGL1, size, attrs)?;
278        self.set_rendering_context(|| RenderingContext::WebGL(Dom::from_ref(&*context)));
279        Some(context)
280    }
281
282    fn get_or_init_webgl2_context(
283        &self,
284        cx: &mut js::context::JSContext,
285        options: HandleValue,
286    ) -> Option<DomRoot<WebGL2RenderingContext>> {
287        if !WebGL2RenderingContext::is_webgl2_enabled(cx, self.global().reflector().get_jsobject())
288        {
289            return None;
290        }
291        if let Some(ctx) = self.context() {
292            return match *ctx {
293                RenderingContext::WebGL2(ref ctx) => Some(DomRoot::from_ref(ctx)),
294                _ => None,
295            };
296        }
297        let window = self.owner_window();
298        let canvas =
299            RootedHTMLCanvasElementOrOffscreenCanvas::HTMLCanvasElement(DomRoot::from_ref(self));
300        let size = self.get_size();
301        let attrs = Self::get_gl_attributes(cx, options)?;
302        let context = WebGL2RenderingContext::new(cx, &window, &canvas, size, attrs)?;
303        self.set_rendering_context(|| RenderingContext::WebGL2(Dom::from_ref(&*context)));
304        Some(context)
305    }
306
307    #[cfg(not(feature = "webgpu"))]
308    fn get_or_init_webgpu_context(&self) -> Option<DomRoot<GPUCanvasContext>> {
309        None
310    }
311
312    #[cfg(feature = "webgpu")]
313    fn get_or_init_webgpu_context(
314        &self,
315        cx: &mut js::context::JSContext,
316    ) -> Option<DomRoot<GPUCanvasContext>> {
317        use servo_base::generic_channel;
318
319        if let Some(ctx) = self.context() {
320            return match *ctx {
321                RenderingContext::WebGPU(ref ctx) => Some(DomRoot::from_ref(ctx)),
322                _ => None,
323            };
324        }
325        let (sender, receiver) = generic_channel::channel().unwrap();
326        let global_scope = self.owner_global();
327        let _ = global_scope
328            .script_to_constellation_chan()
329            .send(ScriptToConstellationMessage::GetWebGPUChan(sender));
330        receiver
331            .recv()
332            .expect("Failed to get WebGPU channel")
333            .map(|channel| {
334                let context = GPUCanvasContext::new(cx, &global_scope, self, channel);
335                self.set_rendering_context(|| RenderingContext::WebGPU(Dom::from_ref(&*context)));
336                context
337            })
338    }
339
340    #[expect(unsafe_code)]
341    fn get_gl_attributes(
342        cx: &mut js::context::JSContext,
343        options: HandleValue,
344    ) -> Option<GLContextAttributes> {
345        unsafe {
346            match WebGLContextAttributes::new(cx, options) {
347                Ok(ConversionResult::Success(attrs)) => Some(attrs.convert()),
348                Ok(ConversionResult::Failure(error)) => {
349                    throw_type_error(cx.raw_cx(), &error);
350                    None
351                },
352                _ => {
353                    debug!("Unexpected error on conversion of WebGLContextAttributes");
354                    None
355                },
356            }
357        }
358    }
359
360    pub(crate) fn is_valid(&self) -> bool {
361        self.Height() != 0 && self.Width() != 0
362    }
363
364    pub(crate) fn get_image_data(&self) -> Option<Snapshot> {
365        match self.context_mode.borrow().as_ref() {
366            Some(context) => context.get_image_data(),
367            None => {
368                let size = self.get_size();
369                if size.is_empty() ||
370                    pixels::compute_rgba8_byte_length_if_within_limit(
371                        size.width as usize,
372                        size.height as usize,
373                    )
374                    .is_none()
375                {
376                    None
377                } else {
378                    Some(Snapshot::cleared(size.cast()))
379                }
380            },
381        }
382    }
383
384    fn maybe_quality(quality: HandleValue) -> Option<f64> {
385        if quality.is_number() {
386            Some(quality.to_number())
387        } else {
388            None
389        }
390    }
391
392    pub(crate) fn update_rendering(&self, epoch: Epoch) -> Option<ImageKey> {
393        let context = self.context()?;
394        let image_key = self.image_key.get()?;
395        let pending = match &*context {
396            RenderingContext::Placeholder(..) => false,
397            RenderingContext::Context2d(context) => context.update_rendering(epoch),
398            RenderingContext::BitmapRenderer(context) => context.update_rendering(epoch),
399            RenderingContext::WebGL(context) => context.update_rendering(epoch),
400            RenderingContext::WebGL2(context) => context.base_context().update_rendering(epoch),
401            #[cfg(feature = "webgpu")]
402            RenderingContext::WebGPU(context) => context.update_rendering(epoch),
403        };
404
405        if pending {
406            return Some(image_key);
407        }
408        None
409    }
410}
411
412impl HTMLCanvasElementMethods<crate::DomTypeHolder> for HTMLCanvasElement {
413    // https://html.spec.whatwg.org/multipage/#dom-canvas-width
414    make_uint_getter!(Width, "width", DEFAULT_WIDTH);
415
416    /// <https://html.spec.whatwg.org/multipage/#dom-canvas-width>
417    fn SetWidth(&self, cx: &mut js::context::JSContext, value: u32) -> Fallible<()> {
418        // > When setting the value of the width or height attribute, if the context mode of the canvas element
419        // > is set to placeholder, the user agent must throw an "InvalidStateError" DOMException and leave the
420        // > attribute's value unchanged.
421        if let Some(RenderingContext::Placeholder(_)) = *self.context_mode.borrow() {
422            return Err(Error::InvalidState(None));
423        }
424
425        let value = if value > UNSIGNED_LONG_MAX {
426            DEFAULT_WIDTH
427        } else {
428            value
429        };
430        self.upcast::<Element>()
431            .set_attribute(cx, &html5ever::local_name!("width"), value.into());
432        Ok(())
433    }
434
435    // https://html.spec.whatwg.org/multipage/#dom-canvas-height
436    make_uint_getter!(Height, "height", DEFAULT_HEIGHT);
437
438    /// <https://html.spec.whatwg.org/multipage/#dom-canvas-height>
439    fn SetHeight(&self, cx: &mut js::context::JSContext, value: u32) -> Fallible<()> {
440        // > When setting the value of the width or height attribute, if the context mode of the canvas element
441        // > is set to placeholder, the user agent must throw an "InvalidStateError" DOMException and leave the
442        // > attribute's value unchanged.
443        if let Some(RenderingContext::Placeholder(_)) = *self.context_mode.borrow() {
444            return Err(Error::InvalidState(None));
445        }
446
447        let value = if value > UNSIGNED_LONG_MAX {
448            DEFAULT_HEIGHT
449        } else {
450            value
451        };
452        self.upcast::<Element>()
453            .set_attribute(cx, &html5ever::local_name!("height"), value.into());
454        Ok(())
455    }
456
457    /// <https://html.spec.whatwg.org/multipage/#dom-canvas-getcontext>
458    fn GetContext(
459        &self,
460        cx: &mut js::context::JSContext,
461        id: DOMString,
462        options: HandleValue,
463    ) -> Fallible<Option<RootedRenderingContext>> {
464        // Always throw an InvalidState exception when the canvas is in Placeholder mode (See table in the spec).
465        if let Some(RenderingContext::Placeholder(_)) = *self.context_mode.borrow() {
466            return Err(Error::InvalidState(None));
467        }
468
469        Ok(match &*id.str() {
470            "2d" => self
471                .get_or_init_2d_context(cx)
472                .map(RootedRenderingContext::CanvasRenderingContext2D),
473            "bitmaprenderer" => self
474                .get_or_init_bitmaprenderer_context(cx)
475                .map(RootedRenderingContext::ImageBitmapRenderingContext),
476            "webgl" | "experimental-webgl" => self
477                .get_or_init_webgl_context(cx, options)
478                .map(RootedRenderingContext::WebGLRenderingContext),
479            "webgl2" | "experimental-webgl2" => self
480                .get_or_init_webgl2_context(cx, options)
481                .map(RootedRenderingContext::WebGL2RenderingContext),
482            #[cfg(feature = "webgpu")]
483            "webgpu" => self
484                .get_or_init_webgpu_context(cx)
485                .map(RootedRenderingContext::GPUCanvasContext),
486            _ => None,
487        })
488    }
489
490    /// <https://html.spec.whatwg.org/multipage/#dom-canvas-todataurl>
491    fn ToDataURL(&self, mime_type: DOMString, quality: HandleValue) -> Fallible<USVString> {
492        // Step 1: If this canvas element's bitmap's origin-clean flag is set to false,
493        // then throw a "SecurityError" DOMException.
494        if !self.origin_is_clean() {
495            return Err(Error::Security(None));
496        }
497
498        // Step 2: If this canvas element's bitmap has no pixels (i.e. either its
499        // horizontal dimension or its vertical dimension is zero), then return the string
500        // "data:,". (This is the shortest data: URL; it represents the empty string in a
501        // text/plain resource.)
502        if self.Width() == 0 || self.Height() == 0 {
503            return Ok(USVString("data:,".into()));
504        }
505
506        // Step 3: Let file be a serialization of this canvas element's bitmap as a file,
507        // passing type and quality if given.
508        let Some(mut snapshot) = self.get_image_data() else {
509            return Ok(USVString("data:,".into()));
510        };
511
512        let image_type = EncodedImageType::from(&mime_type.str() as &str);
513
514        let mut url = format!("data:{};base64,", image_type.as_mime_type());
515
516        let mut encoder = base64::write::EncoderStringWriter::from_consumer(
517            &mut url,
518            &base64::engine::general_purpose::STANDARD,
519        );
520
521        if snapshot
522            .encode_for_mime_type(&image_type, Self::maybe_quality(quality), &mut encoder)
523            .is_err()
524        {
525            // Step 4. If file is null, then return "data:,".
526            return Ok(USVString("data:,".into()));
527        }
528
529        // Step 5. Return a data: URL representing file. [RFC2397]
530        encoder.into_inner();
531        Ok(USVString(url))
532    }
533
534    /// <https://html.spec.whatwg.org/multipage/#dom-canvas-toblob>
535    fn ToBlob(
536        &self,
537        callback: Rc<BlobCallback>,
538        mime_type: DOMString,
539        quality: HandleValue,
540    ) -> Fallible<()> {
541        // Step 1.
542        // If this canvas element's bitmap's origin-clean flag is set to false, then throw a
543        // "SecurityError" DOMException.
544        if !self.origin_is_clean() {
545            return Err(Error::Security(None));
546        }
547
548        // Step 2. Let result be null.
549        // Step 3. If this canvas element's bitmap has pixels (i.e., neither its horizontal dimension
550        // nor its vertical dimension is zero),
551        // then set result to a copy of this canvas element's bitmap.
552        let result = if self.Width() == 0 || self.Height() == 0 {
553            None
554        } else {
555            self.get_image_data()
556        };
557
558        let this = Trusted::new(self);
559        let callback_id = self.callback_id.get().wrapping_add(1);
560        self.callback_id.set(callback_id);
561
562        self.blob_callbacks
563            .borrow_mut()
564            .insert(callback_id, callback);
565        let quality = Self::maybe_quality(quality);
566        let image_type = EncodedImageType::from(&mime_type.str() as &str);
567
568        self.global()
569            .task_manager()
570            .canvas_blob_task_source()
571            .queue(task!(to_blob: move |cx| {
572                let this = this.root();
573                let Some(callback) = &this.blob_callbacks.borrow_mut().remove(&callback_id) else {
574                    return error!("Expected blob callback, but found none!");
575                };
576
577                let Some(mut snapshot) = result else {
578                    let _ = callback.Call__(cx, None, ExceptionHandling::Report);
579                    return;
580                };
581
582                // Step 4.1: If result is non-null, then set result to a serialization of
583                // result as a file with type and quality if given.
584                // Step 4.2: Queue an element task on the canvas blob serialization task
585                // source given the canvas element to run these steps:
586                let mut encoded: Vec<u8> = vec![];
587                let blob_impl;
588                let blob;
589                let result = match snapshot.encode_for_mime_type(&image_type, quality, &mut encoded) {
590                   Ok(..) => {
591                       // Step 4.2.1: If result is non-null, then set result to a new Blob
592                       // object, created in the relevant realm of this canvas element,
593                       // representing result. [FILEAPI]
594                       blob_impl = BlobImpl::new_from_bytes(encoded, image_type.as_mime_type());
595                       blob = Blob::new(cx, &this.global(), blob_impl);
596                       Some(&*blob)
597                   }
598                   Err(..) => None,
599                };
600
601                // Step 4.2.2: Invoke callback with « result » and "report".
602                let _ = callback.Call__(cx, result, ExceptionHandling::Report);
603            }));
604
605        Ok(())
606    }
607
608    /// <https://html.spec.whatwg.org/multipage/#dom-canvas-transfercontroltooffscreen>
609    fn TransferControlToOffscreen(
610        &self,
611        cx: &mut js::context::JSContext,
612    ) -> Fallible<DomRoot<OffscreenCanvas>> {
613        if self.context_mode.borrow().is_some() {
614            // Step 1.
615            // If this canvas element's context mode is not set to none, throw an "InvalidStateError" DOMException.
616            return Err(Error::InvalidState(None));
617        };
618
619        // Step 2.
620        // Let offscreenCanvas be a new OffscreenCanvas object with its width and height equal to the values of
621        // the width and height content attributes of this canvas element.
622        // Step 3.
623        // Set the placeholder canvas element of offscreenCanvas to a weak reference to this canvas element.
624        let offscreen_canvas = OffscreenCanvas::new(
625            cx,
626            &self.global(),
627            None,
628            self.Width().into(),
629            self.Height().into(),
630            Some(WeakRef::new(self)),
631        );
632
633        // Step 4. Set this canvas element's context mode to placeholder.
634        self.set_rendering_context(|| RenderingContext::Placeholder(offscreen_canvas.as_traced()));
635
636        // Step 5. Return offscreenCanvas.
637        Ok(offscreen_canvas)
638    }
639
640    /// <https://w3c.github.io/mediacapture-fromelement/#dom-htmlcanvaselement-capturestream>
641    fn CaptureStream(
642        &self,
643        cx: &mut js::context::JSContext,
644        _frame_request_rate: Option<Finite<f64>>,
645    ) -> DomRoot<MediaStream> {
646        let global = self.global();
647        let stream = MediaStream::new(cx, &global);
648        let track =
649            MediaStreamTrack::new(cx, &global, MediaStreamId::new(), MediaStreamType::Video);
650        stream.AddTrack(&track);
651        stream
652    }
653}
654
655impl VirtualMethods for HTMLCanvasElement {
656    fn super_type(&self) -> Option<&dyn VirtualMethods> {
657        Some(self.upcast::<HTMLElement>() as &dyn VirtualMethods)
658    }
659
660    fn attribute_mutated(
661        &self,
662        cx: &mut js::context::JSContext,
663        attr: AttrRef<'_>,
664        mutation: AttributeMutation,
665    ) {
666        self.super_type()
667            .unwrap()
668            .attribute_mutated(cx, attr, mutation);
669        match attr.local_name() {
670            &local_name!("width") | &local_name!("height") => {
671                self.recreate_contexts_after_resize();
672                self.upcast::<Node>().dirty(NodeDamage::Other);
673            },
674            _ => {},
675        };
676    }
677
678    fn attribute_affects_presentational_hints(&self, attr: AttrRef<'_>) -> bool {
679        match attr.local_name() {
680            &local_name!("width") | &local_name!("height") => true,
681            _ => self
682                .super_type()
683                .unwrap()
684                .attribute_affects_presentational_hints(attr),
685        }
686    }
687
688    fn parse_plain_attribute(&self, name: &LocalName, value: DOMString) -> AttrValue {
689        match *name {
690            local_name!("width") => AttrValue::from_u32(value.into(), DEFAULT_WIDTH),
691            local_name!("height") => AttrValue::from_u32(value.into(), DEFAULT_HEIGHT),
692            _ => self
693                .super_type()
694                .unwrap()
695                .parse_plain_attribute(name, value),
696        }
697    }
698}
699
700impl Convert<GLContextAttributes> for WebGLContextAttributes {
701    fn convert(self) -> GLContextAttributes {
702        GLContextAttributes {
703            alpha: self.alpha,
704            depth: self.depth,
705            stencil: self.stencil,
706            antialias: self.antialias,
707            premultiplied_alpha: self.premultipliedAlpha,
708            preserve_drawing_buffer: self.preserveDrawingBuffer,
709        }
710    }
711}