1use 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#[dom_struct]
72pub(crate) struct HTMLCanvasElement {
73 htmlelement: HTMLElement,
74
75 context_mode: DomRefCell<Option<RenderingContext>>,
77
78 callback_id: Cell<u32>,
80
81 #[conditional_malloc_size_of]
83 blob_callbacks: RefCell<FxHashMap<u32, Rc<BlobCallback>>>,
84
85 #[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 fn get_or_init_bitmaprenderer_context(
240 &self,
241 cx: &mut js::context::JSContext,
242 ) -> Option<DomRoot<ImageBitmapRenderingContext>> {
243 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 let canvas =
256 RootedHTMLCanvasElementOrOffscreenCanvas::HTMLCanvasElement(DomRoot::from_ref(self));
257
258 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 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 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 make_uint_getter!(Width, "width", DEFAULT_WIDTH);
441
442 fn SetWidth(&self, cx: &mut js::context::JSContext, value: u32) -> Fallible<()> {
444 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 make_uint_getter!(Height, "height", DEFAULT_HEIGHT);
463
464 fn SetHeight(&self, cx: &mut js::context::JSContext, value: u32) -> Fallible<()> {
466 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 fn GetContext(
485 &self,
486 cx: &mut js::context::JSContext,
487 id: DOMString,
488 options: HandleValue,
489 ) -> Fallible<Option<RootedRenderingContext>> {
490 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 fn ToDataURL(
518 &self,
519 _context: JSContext,
520 mime_type: DOMString,
521 quality: HandleValue,
522 ) -> Fallible<USVString> {
523 if !self.origin_is_clean() {
526 return Err(Error::Security(None));
527 }
528
529 if self.Width() == 0 || self.Height() == 0 {
534 return Ok(USVString("data:,".into()));
535 }
536
537 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 return Ok(USVString("data:,".into()));
558 }
559
560 encoder.into_inner();
562 Ok(USVString(url))
563 }
564
565 fn ToBlob(
567 &self,
568 _cx: JSContext,
569 callback: Rc<BlobCallback>,
570 mime_type: DOMString,
571 quality: HandleValue,
572 ) -> Fallible<()> {
573 if !self.origin_is_clean() {
577 return Err(Error::Security(None));
578 }
579
580 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 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 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 let _ = callback.Call__(cx, result, ExceptionHandling::Report);
635 }));
636
637 Ok(())
638 }
639
640 fn TransferControlToOffscreen(
642 &self,
643 cx: &mut js::context::JSContext,
644 ) -> Fallible<DomRoot<OffscreenCanvas>> {
645 if self.context_mode.borrow().is_some() {
646 return Err(Error::InvalidState(None));
649 };
650
651 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 self.set_rendering_context(|| RenderingContext::Placeholder(offscreen_canvas.as_traced()));
667
668 Ok(offscreen_canvas)
670 }
671
672 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}