1use std::cell::{Cell, RefCell};
6use std::rc::Rc;
7
8use canvas_traits::webgl::{GLContextAttributes, WebGLVersion};
9use constellation_traits::BlobImpl;
10#[cfg(feature = "webgpu")]
11use constellation_traits::ScriptToConstellationMessage;
12use dom_struct::dom_struct;
13use euclid::default::Size2D;
14use html5ever::{LocalName, Prefix, local_name, ns};
15#[cfg(feature = "webgpu")]
16use ipc_channel::ipc::{self as ipcchan};
17use js::error::throw_type_error;
18use js::rust::{HandleObject, HandleValue};
19use layout_api::HTMLCanvasData;
20use pixels::{EncodedImageType, Snapshot};
21use rustc_hash::FxHashMap;
22use script_bindings::weakref::WeakRef;
23use servo_media::streams::MediaStreamType;
24use servo_media::streams::registry::MediaStreamId;
25use style::attr::AttrValue;
26
27use crate::canvas_context::{CanvasContext, LayoutCanvasRenderingContextHelpers, RenderingContext};
28use crate::conversions::Convert;
29use crate::dom::attr::Attr;
30use crate::dom::bindings::callback::ExceptionHandling;
31use crate::dom::bindings::cell::{DomRefCell, Ref};
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, DomObject};
44use crate::dom::bindings::root::{Dom, DomRoot, LayoutDom, ToLayout};
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::{AttributeMutation, Element, LayoutElementHelpers};
50#[cfg(not(feature = "webgpu"))]
51use crate::dom::gpucanvascontext::GPUCanvasContext;
52use crate::dom::html::htmlelement::HTMLElement;
53use crate::dom::imagebitmaprenderingcontext::ImageBitmapRenderingContext;
54use crate::dom::mediastream::MediaStream;
55use crate::dom::mediastreamtrack::MediaStreamTrack;
56use crate::dom::node::{Node, NodeDamage, NodeTraits};
57use crate::dom::offscreencanvas::OffscreenCanvas;
58use crate::dom::values::UNSIGNED_LONG_MAX;
59use crate::dom::virtualmethods::VirtualMethods;
60use crate::dom::webgl::webgl2renderingcontext::WebGL2RenderingContext;
61use crate::dom::webgl::webglrenderingcontext::WebGLRenderingContext;
62#[cfg(feature = "webgpu")]
63use crate::dom::webgpu::gpucanvascontext::GPUCanvasContext;
64use crate::script_runtime::{CanGc, JSContext};
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 #[conditional_malloc_size_of]
80 blob_callbacks: RefCell<FxHashMap<u32, Rc<BlobCallback>>>,
81}
82
83impl HTMLCanvasElement {
84 fn new_inherited(
85 local_name: LocalName,
86 prefix: Option<Prefix>,
87 document: &Document,
88 ) -> HTMLCanvasElement {
89 HTMLCanvasElement {
90 htmlelement: HTMLElement::new_inherited(local_name, prefix, document),
91 context_mode: DomRefCell::new(None),
92 callback_id: Cell::new(0),
93 blob_callbacks: RefCell::new(FxHashMap::default()),
94 }
95 }
96
97 #[cfg_attr(crown, allow(crown::unrooted_must_root))]
98 pub(crate) fn new(
99 local_name: LocalName,
100 prefix: Option<Prefix>,
101 document: &Document,
102 proto: Option<HandleObject>,
103 can_gc: CanGc,
104 ) -> DomRoot<HTMLCanvasElement> {
105 Node::reflect_node_with_proto(
106 Box::new(HTMLCanvasElement::new_inherited(
107 local_name, prefix, document,
108 )),
109 document,
110 proto,
111 can_gc,
112 )
113 }
114
115 fn recreate_contexts_after_resize(&self) {
116 if let Some(ref context) = *self.context_mode.borrow() {
117 context.resize()
118 }
119 }
120
121 pub(crate) fn get_size(&self) -> Size2D<u32> {
122 Size2D::new(self.Width(), self.Height())
123 }
124
125 pub(crate) fn origin_is_clean(&self) -> bool {
126 match *self.context_mode.borrow() {
127 Some(ref context) => context.origin_is_clean(),
128 _ => true,
129 }
130 }
131
132 pub(crate) fn mark_as_dirty(&self) {
133 if let Some(ref context) = *self.context_mode.borrow() {
134 context.mark_as_dirty()
135 }
136 }
137
138 pub(crate) fn set_natural_width(&self, value: u32, can_gc: CanGc) {
139 let value = if value > UNSIGNED_LONG_MAX {
140 DEFAULT_WIDTH
141 } else {
142 value
143 };
144 let element = self.upcast::<Element>();
145 element.set_uint_attribute(&html5ever::local_name!("width"), value, can_gc);
146 }
147
148 pub(crate) fn set_natural_height(&self, value: u32, can_gc: CanGc) {
149 let value = if value > UNSIGNED_LONG_MAX {
150 DEFAULT_HEIGHT
151 } else {
152 value
153 };
154 let element = self.upcast::<Element>();
155 element.set_uint_attribute(&html5ever::local_name!("height"), value, can_gc);
156 }
157}
158
159pub(crate) trait LayoutHTMLCanvasElementHelpers {
160 fn data(self) -> HTMLCanvasData;
161}
162
163impl LayoutHTMLCanvasElementHelpers for LayoutDom<'_, HTMLCanvasElement> {
164 #[allow(unsafe_code)]
165 fn data(self) -> HTMLCanvasData {
166 let source = unsafe {
167 match self.unsafe_get().context_mode.borrow_for_layout().as_ref() {
168 Some(RenderingContext::Context2d(context)) => {
169 context.to_layout().canvas_data_source()
170 },
171 Some(RenderingContext::BitmapRenderer(context)) => {
172 context.to_layout().canvas_data_source()
173 },
174 Some(RenderingContext::WebGL(context)) => context.to_layout().canvas_data_source(),
175 Some(RenderingContext::WebGL2(context)) => context.to_layout().canvas_data_source(),
176 #[cfg(feature = "webgpu")]
177 Some(RenderingContext::WebGPU(context)) => context.to_layout().canvas_data_source(),
178 Some(RenderingContext::Placeholder(_)) | None => None,
179 }
180 };
181
182 let width_attr = self
183 .upcast::<Element>()
184 .get_attr_for_layout(&ns!(), &local_name!("width"));
185 let height_attr = self
186 .upcast::<Element>()
187 .get_attr_for_layout(&ns!(), &local_name!("height"));
188 HTMLCanvasData {
189 source,
190 width: width_attr.map_or(DEFAULT_WIDTH, |val| val.as_uint()),
191 height: height_attr.map_or(DEFAULT_HEIGHT, |val| val.as_uint()),
192 }
193 }
194}
195
196impl HTMLCanvasElement {
197 pub(crate) fn context(&self) -> Option<Ref<'_, RenderingContext>> {
198 Ref::filter_map(self.context_mode.borrow(), |ctx| ctx.as_ref()).ok()
199 }
200
201 fn get_or_init_2d_context(&self, can_gc: CanGc) -> Option<DomRoot<CanvasRenderingContext2D>> {
202 if let Some(ctx) = self.context() {
203 return match *ctx {
204 RenderingContext::Context2d(ref ctx) => Some(DomRoot::from_ref(ctx)),
205 _ => None,
206 };
207 }
208
209 let window = self.owner_window();
210 let size = self.get_size();
211 let context = CanvasRenderingContext2D::new(window.as_global_scope(), self, size, can_gc)?;
212
213 self.context_mode
214 .borrow_mut()
215 .replace(RenderingContext::Context2d(Dom::from_ref(&*context)));
216 self.upcast::<Node>().dirty(NodeDamage::ContentOrHeritage);
217
218 Some(context)
219 }
220
221 fn get_or_init_bitmaprenderer_context(
223 &self,
224 can_gc: CanGc,
225 ) -> Option<DomRoot<ImageBitmapRenderingContext>> {
226 if let Some(ctx) = self.context() {
229 return match *ctx {
230 RenderingContext::BitmapRenderer(ref ctx) => Some(DomRoot::from_ref(ctx)),
231 _ => None,
232 };
233 }
234
235 let canvas =
239 RootedHTMLCanvasElementOrOffscreenCanvas::HTMLCanvasElement(DomRoot::from_ref(self));
240
241 let context = ImageBitmapRenderingContext::new(&self.owner_global(), &canvas, can_gc);
242
243 self.context_mode
245 .borrow_mut()
246 .replace(RenderingContext::BitmapRenderer(Dom::from_ref(&*context)));
247 self.upcast::<Node>().dirty(NodeDamage::ContentOrHeritage);
248
249 Some(context)
251 }
252
253 fn get_or_init_webgl_context(
254 &self,
255 cx: JSContext,
256 options: HandleValue,
257 can_gc: CanGc,
258 ) -> Option<DomRoot<WebGLRenderingContext>> {
259 if let Some(ctx) = self.context() {
260 return match *ctx {
261 RenderingContext::WebGL(ref ctx) => Some(DomRoot::from_ref(ctx)),
262 _ => None,
263 };
264 }
265 let window = self.owner_window();
266 let canvas =
267 RootedHTMLCanvasElementOrOffscreenCanvas::HTMLCanvasElement(DomRoot::from_ref(self));
268 let size = self.get_size();
269 let attrs = Self::get_gl_attributes(cx, options, can_gc)?;
270 let context = WebGLRenderingContext::new(
271 &window,
272 &canvas,
273 WebGLVersion::WebGL1,
274 size,
275 attrs,
276 can_gc,
277 )?;
278
279 self.context_mode
280 .borrow_mut()
281 .replace(RenderingContext::WebGL(Dom::from_ref(&*context)));
282 self.upcast::<Node>().dirty(NodeDamage::ContentOrHeritage);
283
284 Some(context)
285 }
286
287 fn get_or_init_webgl2_context(
288 &self,
289 cx: JSContext,
290 options: HandleValue,
291 can_gc: CanGc,
292 ) -> Option<DomRoot<WebGL2RenderingContext>> {
293 if !WebGL2RenderingContext::is_webgl2_enabled(cx, self.global().reflector().get_jsobject())
294 {
295 return None;
296 }
297 if let Some(ctx) = self.context() {
298 return match *ctx {
299 RenderingContext::WebGL2(ref ctx) => Some(DomRoot::from_ref(ctx)),
300 _ => None,
301 };
302 }
303 let window = self.owner_window();
304 let canvas =
305 RootedHTMLCanvasElementOrOffscreenCanvas::HTMLCanvasElement(DomRoot::from_ref(self));
306 let size = self.get_size();
307 let attrs = Self::get_gl_attributes(cx, options, can_gc)?;
308 let context = WebGL2RenderingContext::new(&window, &canvas, size, attrs, can_gc)?;
309
310 self.context_mode
311 .borrow_mut()
312 .replace(RenderingContext::WebGL2(Dom::from_ref(&*context)));
313 self.upcast::<Node>().dirty(NodeDamage::ContentOrHeritage);
314
315 Some(context)
316 }
317
318 #[cfg(not(feature = "webgpu"))]
319 fn get_or_init_webgpu_context(&self) -> Option<DomRoot<GPUCanvasContext>> {
320 None
321 }
322
323 #[cfg(feature = "webgpu")]
324 fn get_or_init_webgpu_context(&self, can_gc: CanGc) -> Option<DomRoot<GPUCanvasContext>> {
325 if let Some(ctx) = self.context() {
326 return match *ctx {
327 RenderingContext::WebGPU(ref ctx) => Some(DomRoot::from_ref(ctx)),
328 _ => None,
329 };
330 }
331 let (sender, receiver) = ipcchan::channel().unwrap();
332 let global_scope = self.owner_global();
333 let _ = global_scope
334 .script_to_constellation_chan()
335 .send(ScriptToConstellationMessage::GetWebGPUChan(sender));
336 receiver
337 .recv()
338 .expect("Failed to get WebGPU channel")
339 .map(|channel| {
340 let context = GPUCanvasContext::new(&global_scope, self, channel, can_gc);
341
342 self.context_mode
343 .borrow_mut()
344 .replace(RenderingContext::WebGPU(Dom::from_ref(&*context)));
345 self.upcast::<Node>().dirty(NodeDamage::ContentOrHeritage);
346
347 context
348 })
349 }
350
351 pub(crate) fn get_base_webgl_context(&self) -> Option<DomRoot<WebGLRenderingContext>> {
353 match *self.context_mode.borrow() {
354 Some(RenderingContext::WebGL(ref context)) => Some(DomRoot::from_ref(context)),
355 Some(RenderingContext::WebGL2(ref context)) => Some(context.base_context()),
356 _ => None,
357 }
358 }
359
360 #[allow(unsafe_code)]
361 fn get_gl_attributes(
362 cx: JSContext,
363 options: HandleValue,
364 can_gc: CanGc,
365 ) -> Option<GLContextAttributes> {
366 unsafe {
367 match WebGLContextAttributes::new(cx, options, can_gc) {
368 Ok(ConversionResult::Success(attrs)) => Some(attrs.convert()),
369 Ok(ConversionResult::Failure(error)) => {
370 throw_type_error(*cx, &error);
371 None
372 },
373 _ => {
374 debug!("Unexpected error on conversion of WebGLContextAttributes");
375 None
376 },
377 }
378 }
379 }
380
381 pub(crate) fn is_valid(&self) -> bool {
382 self.Height() != 0 && self.Width() != 0
383 }
384
385 pub(crate) fn get_image_data(&self) -> Option<Snapshot> {
386 match self.context_mode.borrow().as_ref() {
387 Some(context) => context.get_image_data(),
388 None => {
389 let size = self.get_size();
390 if size.is_empty() ||
391 pixels::compute_rgba8_byte_length_if_within_limit(
392 size.width as usize,
393 size.height as usize,
394 )
395 .is_none()
396 {
397 None
398 } else {
399 Some(Snapshot::cleared(size.cast()))
400 }
401 },
402 }
403 }
404
405 fn maybe_quality(quality: HandleValue) -> Option<f64> {
406 if quality.is_number() {
407 Some(quality.to_number())
408 } else {
409 None
410 }
411 }
412}
413
414impl HTMLCanvasElementMethods<crate::DomTypeHolder> for HTMLCanvasElement {
415 make_uint_getter!(Width, "width", DEFAULT_WIDTH);
417
418 fn SetWidth(&self, value: u32, can_gc: CanGc) -> Fallible<()> {
420 if let Some(RenderingContext::Placeholder(_)) = *self.context_mode.borrow() {
424 return Err(Error::InvalidState(None));
425 }
426
427 let value = if value > UNSIGNED_LONG_MAX {
428 DEFAULT_WIDTH
429 } else {
430 value
431 };
432 let element = self.upcast::<Element>();
433 element.set_uint_attribute(&html5ever::local_name!("width"), value, can_gc);
434 Ok(())
435 }
436
437 make_uint_getter!(Height, "height", DEFAULT_HEIGHT);
439
440 fn SetHeight(&self, value: u32, can_gc: CanGc) -> Fallible<()> {
442 if let Some(RenderingContext::Placeholder(_)) = *self.context_mode.borrow() {
446 return Err(Error::InvalidState(None));
447 }
448
449 let value = if value > UNSIGNED_LONG_MAX {
450 DEFAULT_HEIGHT
451 } else {
452 value
453 };
454 let element = self.upcast::<Element>();
455 element.set_uint_attribute(&html5ever::local_name!("height"), value, can_gc);
456 Ok(())
457 }
458
459 fn GetContext(
461 &self,
462 cx: JSContext,
463 id: DOMString,
464 options: HandleValue,
465 can_gc: CanGc,
466 ) -> Fallible<Option<RootedRenderingContext>> {
467 if let Some(RenderingContext::Placeholder(_)) = *self.context_mode.borrow() {
469 return Err(Error::InvalidState(None));
470 }
471
472 Ok(match &*id.str() {
473 "2d" => self
474 .get_or_init_2d_context(can_gc)
475 .map(RootedRenderingContext::CanvasRenderingContext2D),
476 "bitmaprenderer" => self
477 .get_or_init_bitmaprenderer_context(can_gc)
478 .map(RootedRenderingContext::ImageBitmapRenderingContext),
479 "webgl" | "experimental-webgl" => self
480 .get_or_init_webgl_context(cx, options, can_gc)
481 .map(RootedRenderingContext::WebGLRenderingContext),
482 "webgl2" | "experimental-webgl2" => self
483 .get_or_init_webgl2_context(cx, options, can_gc)
484 .map(RootedRenderingContext::WebGL2RenderingContext),
485 #[cfg(feature = "webgpu")]
486 "webgpu" => self
487 .get_or_init_webgpu_context(can_gc)
488 .map(RootedRenderingContext::GPUCanvasContext),
489 _ => None,
490 })
491 }
492
493 fn ToDataURL(
495 &self,
496 _context: JSContext,
497 mime_type: DOMString,
498 quality: HandleValue,
499 ) -> Fallible<USVString> {
500 if !self.origin_is_clean() {
503 return Err(Error::Security);
504 }
505
506 if self.Width() == 0 || self.Height() == 0 {
511 return Ok(USVString("data:,".into()));
512 }
513
514 let Some(mut snapshot) = self.get_image_data() else {
517 return Ok(USVString("data:,".into()));
518 };
519
520 let image_type = EncodedImageType::from(mime_type.to_string());
521
522 let mut url = format!("data:{};base64,", image_type.as_mime_type());
523
524 let mut encoder = base64::write::EncoderStringWriter::from_consumer(
525 &mut url,
526 &base64::engine::general_purpose::STANDARD,
527 );
528
529 if snapshot
530 .encode_for_mime_type(&image_type, Self::maybe_quality(quality), &mut encoder)
531 .is_err()
532 {
533 return Ok(USVString("data:,".into()));
535 }
536
537 encoder.into_inner();
539 Ok(USVString(url))
540 }
541
542 fn ToBlob(
544 &self,
545 _cx: JSContext,
546 callback: Rc<BlobCallback>,
547 mime_type: DOMString,
548 quality: HandleValue,
549 ) -> Fallible<()> {
550 if !self.origin_is_clean() {
554 return Err(Error::Security);
555 }
556
557 let result = if self.Width() == 0 || self.Height() == 0 {
562 None
563 } else {
564 self.get_image_data()
565 };
566
567 let this = Trusted::new(self);
568 let callback_id = self.callback_id.get().wrapping_add(1);
569 self.callback_id.set(callback_id);
570
571 self.blob_callbacks
572 .borrow_mut()
573 .insert(callback_id, callback);
574 let quality = Self::maybe_quality(quality);
575 let image_type = EncodedImageType::from(mime_type.to_string());
576
577 self.global()
578 .task_manager()
579 .canvas_blob_task_source()
580 .queue(task!(to_blob: move || {
581 let this = this.root();
582 let Some(callback) = &this.blob_callbacks.borrow_mut().remove(&callback_id) else {
583 return error!("Expected blob callback, but found none!");
584 };
585
586 let Some(mut snapshot) = result else {
587 let _ = callback.Call__(None, ExceptionHandling::Report, CanGc::note());
588 return;
589 };
590
591 let mut encoded: Vec<u8> = vec![];
596 let blob_impl;
597 let blob;
598 let result = match snapshot.encode_for_mime_type(&image_type, quality, &mut encoded) {
599 Ok(..) => {
600 blob_impl = BlobImpl::new_from_bytes(encoded, image_type.as_mime_type());
604 blob = Blob::new(&this.global(), blob_impl, CanGc::note());
605 Some(&*blob)
606 }
607 Err(..) => None,
608 };
609
610 let _ = callback.Call__(result, ExceptionHandling::Report, CanGc::note());
612 }));
613
614 Ok(())
615 }
616
617 fn TransferControlToOffscreen(&self, can_gc: CanGc) -> Fallible<DomRoot<OffscreenCanvas>> {
619 if self.context_mode.borrow().is_some() {
620 return Err(Error::InvalidState(None));
623 };
624
625 let offscreen_canvas = OffscreenCanvas::new(
631 &self.global(),
632 None,
633 self.Width().into(),
634 self.Height().into(),
635 Some(WeakRef::new(self)),
636 can_gc,
637 );
638
639 *self.context_mode.borrow_mut() =
641 Some(RenderingContext::Placeholder(offscreen_canvas.as_traced()));
642
643 Ok(offscreen_canvas)
645 }
646
647 fn CaptureStream(
649 &self,
650 _frame_request_rate: Option<Finite<f64>>,
651 can_gc: CanGc,
652 ) -> DomRoot<MediaStream> {
653 let global = self.global();
654 let stream = MediaStream::new(&global, can_gc);
655 let track = MediaStreamTrack::new(
656 &global,
657 MediaStreamId::new(),
658 MediaStreamType::Video,
659 can_gc,
660 );
661 stream.AddTrack(&track);
662 stream
663 }
664}
665
666impl VirtualMethods for HTMLCanvasElement {
667 fn super_type(&self) -> Option<&dyn VirtualMethods> {
668 Some(self.upcast::<HTMLElement>() as &dyn VirtualMethods)
669 }
670
671 fn attribute_mutated(&self, attr: &Attr, mutation: AttributeMutation, can_gc: CanGc) {
672 self.super_type()
673 .unwrap()
674 .attribute_mutated(attr, mutation, can_gc);
675 match attr.local_name() {
676 &local_name!("width") | &local_name!("height") => {
677 self.recreate_contexts_after_resize();
678 self.upcast::<Node>().dirty(NodeDamage::Other);
679 },
680 _ => {},
681 };
682 }
683
684 fn attribute_affects_presentational_hints(&self, attr: &Attr) -> bool {
685 match attr.local_name() {
686 &local_name!("width") | &local_name!("height") => true,
687 _ => self
688 .super_type()
689 .unwrap()
690 .attribute_affects_presentational_hints(attr),
691 }
692 }
693
694 fn parse_plain_attribute(&self, name: &LocalName, value: DOMString) -> AttrValue {
695 match *name {
696 local_name!("width") => AttrValue::from_u32(value.into(), DEFAULT_WIDTH),
697 local_name!("height") => AttrValue::from_u32(value.into(), DEFAULT_HEIGHT),
698 _ => self
699 .super_type()
700 .unwrap()
701 .parse_plain_attribute(name, value),
702 }
703 }
704}
705
706impl Convert<GLContextAttributes> for WebGLContextAttributes {
707 fn convert(self) -> GLContextAttributes {
708 GLContextAttributes {
709 alpha: self.alpha,
710 depth: self.depth,
711 stencil: self.stencil,
712 antialias: self.antialias,
713 premultiplied_alpha: self.premultipliedAlpha,
714 preserve_drawing_buffer: self.preserveDrawingBuffer,
715 }
716 }
717}