Trigger context menu on a canvas on mobile

Question

I'm rendering content on a canvas that I want to be able to save using the browser's native "save as" context menu option.

This works well on desktop (you can go here and right click on the green rectangle) but not on mobile (same example).

I've tried firing contextmenu events manually attached to the canvas with (using Konva and react)

stageRef.current?.dispatchEvent(new MouseEvent('contextmenu', {
  bubbles: true,
  cancelable: false,
  view: window,
  button: 2,
  buttons: 0,
  clientX: stageRef.current?.getClientRect().x,
  clientY: stageRef.current?.getClientRect().y,
}))

Any idea how to enable this behavior? I couldn't find any source on why it doesn't happen on mobile.

Answer 1

As I can see mobile safari doesn't have such context menus for any canvas. And as I know "save as" is not a standard, so it may not work in all browsers.

As the solutions, you can make your own context menu implementation with export options.

https://konvajs.org/docs/data_and_serialization/Stage_Data_URL.html#page-title

https://konvajs.org/docs/sandbox/Canvas_Context_Menu.html#page-title