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