4

I am new to Web Development. Please help me.

Is there any way we can enable default context menu on canvas like it has on images (To download image / share image)?

On the pc browsers we can right click and save the canvas as image. But on mobile chrome the context menu doesn't pop up on long pressing the canvas.

Is it possible to fire the same context menu on canvas as image elements gets?

I have researched a lot about it and didn't find a proper answer. I don't want a custom context menu. I need the default one.

KRUNAL LIA 1741032
  • 41
  • 2
  • Maybe you wanna look on this function: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL, it doesnt throw a context menu, but there you would have a image URI – Raqha Oct 21 '20 at 08:09
  • 2
    @Raqha Thanks for the suggestion, but the reason I need the context menu is because I cannot use the `toDataURL` function as it is throwing a canvas tainted error due to cross origin policies and to fix that I need a server which should be hosted on the same domain to serve the images and videos that I am drawing on the canvas. (Right now I'm getting it from a google api and it doesnt allow cross origin – KRUNAL LIA 1741032 Oct 21 '20 at 08:56

1 Answers1

0

You cant activate the context menu on mobile, like it is on your PC. And i think Safari dont even has a context menu for canvas in general. But you can simply use "toDataURL", you said its throwing an error, i dont know exactly what youre using. But i know this implementation of it, without needing a server etc. I provided you a codepen for it (Stackoverflow snippets deactivated iframe-downloads). Just open the context menu of the canvas and it will download without you needing to anything, also works on mobile (press it for longer). Just a custom context menu, you can find tons of articles in the internet.

https://codepen.io/raqhael/pen/RwRGmQx (I use a function from somewhere else in there, all credit to the function goes to owencm)

<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8" />
    <title>URL Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }

      #buttons {
        position: absolute;
        top: 5px;
        left: 10px;
        display:none;
      }

      #buttons > input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <div id="buttons">
      <button id="save">
        Save as image
      </button>
    </div>
    <canvas id="cv"></canvas>
    <script>
      let can = document.getElementById("cv");
      let ctx = can.getContext("2d");
      var width = window.innerWidth;
      var height = window.innerHeight;

      ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "red";
ctx.fill();

ctx.beginPath();
ctx.rect(40, 40, 150, 100);
ctx.fillStyle = "blue";
ctx.fill();
      
      // function from https://stackoverflow.com/a/15832662/512042
      function downloadURI(uri, name) {
        var link = document.createElement('a');
        link.download = name;
        link.href = uri;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        delete link;
      }

      can.oncontextmenu = () => {
  
          var dataURL = can.toDataURL();
          downloadURI(dataURL, 'canvas.png');
      };
    </script>
  </body>
</html>
Raqha
  • 754
  • 4
  • 17
  • 1
    https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported This is the error I'm talking about. To be specific, I'm trying to draw an image on the canvas which is being served from another domain and doesn't allow cross origin. So the canvas gets tainted and `toDataURL` function call gives an error – KRUNAL LIA 1741032 Oct 21 '20 at 14:41