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::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#[dom_struct]
71pub(crate) struct HTMLCanvasElement {
72 htmlelement: HTMLElement,
73
74 context_mode: DomRefCell<Option<RenderingContext>>,
76
77 callback_id: Cell<u32>,
79
80 #[conditional_malloc_size_of]
82 blob_callbacks: RefCell<FxHashMap<u32, Rc<BlobCallback>>>,
83
84 #[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 fn get_or_init_bitmaprenderer_context(
234 &self,
235 cx: &mut js::context::JSContext,
236 ) -> Option<DomRoot<ImageBitmapRenderingContext>> {
237 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 let canvas =
250 RootedHTMLCanvasElementOrOffscreenCanvas::HTMLCanvasElement(DomRoot::from_ref(self));
251
252 let context = ImageBitmapRenderingContext::new(cx, &self.owner_global(), &canvas);
254 self.set_rendering_context(|| RenderingContext::BitmapRenderer(Dom::from_ref(&*context)));
255
256 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 make_uint_getter!(Width, "width", DEFAULT_WIDTH);
415
416 fn SetWidth(&self, cx: &mut js::context::JSContext, value: u32) -> Fallible<()> {
418 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 make_uint_getter!(Height, "height", DEFAULT_HEIGHT);
437
438 fn SetHeight(&self, cx: &mut js::context::JSContext, value: u32) -> Fallible<()> {
440 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 fn GetContext(
459 &self,
460 cx: &mut js::context::JSContext,
461 id: DOMString,
462 options: HandleValue,
463 ) -> Fallible<Option<RootedRenderingContext>> {
464 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 fn ToDataURL(&self, mime_type: DOMString, quality: HandleValue) -> Fallible<USVString> {
492 if !self.origin_is_clean() {
495 return Err(Error::Security(None));
496 }
497
498 if self.Width() == 0 || self.Height() == 0 {
503 return Ok(USVString("data:,".into()));
504 }
505
506 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 return Ok(USVString("data:,".into()));
527 }
528
529 encoder.into_inner();
531 Ok(USVString(url))
532 }
533
534 fn ToBlob(
536 &self,
537 callback: Rc<BlobCallback>,
538 mime_type: DOMString,
539 quality: HandleValue,
540 ) -> Fallible<()> {
541 if !self.origin_is_clean() {
545 return Err(Error::Security(None));
546 }
547
548 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 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 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 let _ = callback.Call__(cx, result, ExceptionHandling::Report);
603 }));
604
605 Ok(())
606 }
607
608 fn TransferControlToOffscreen(
610 &self,
611 cx: &mut js::context::JSContext,
612 ) -> Fallible<DomRoot<OffscreenCanvas>> {
613 if self.context_mode.borrow().is_some() {
614 return Err(Error::InvalidState(None));
617 };
618
619 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 self.set_rendering_context(|| RenderingContext::Placeholder(offscreen_canvas.as_traced()));
635
636 Ok(offscreen_canvas)
638 }
639
640 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}