Download canvas to image

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Context Menu Example</title>

</head>

<body id="allofit">
	<header>
		<h2>Context Menu Example</h2>
	</header>

	<gm:figure-group>

	<div id='sdi_canvas1' style="width:400px; height:400px">

<button id="container">  this is data in my DIV</button>

	</div>
	 <div id="context-menu" class="context-menu" oncontextmenu="ShowMenu('contextMenu',event)" style="display:none">
	 <div class="item">Option 1</div>
	 <div class="item">Option 2</div>
	  </div>
 
</body>

</html>

CSS

#context-menu {
position: fixed;
z-index: 10000;
width: 180px;
background: #ffaaaa;
border-radius: 5px;
display: none;
}



#context-menu.item {
padding: 2px 4px;
font-size: 12px;
color: #eee;
cursor: pointer;
border-radius: inherit;
}

JavaScript

function view() {

    const contextMenu = document.getElementById('context-menu');
    const scope = document.querySelector("body") ;

    //body
 
    var listLength = contextMenu.children.length;
    for (i = 0; i < listLength; i++) contextMenu.removeChild(contextMenu.children[0]);
 

		  contextMenuadd(contextMenu,"line 1 of context menu",1);
		  contextMenuadd(contextMenu,"line 2 of context menu",2);
		  contextMenuadd(contextMenu,"line 3 of context menu",3);
		  contextMenuadd(contextMenu,"line 4 of context menu",4);

    scope.addEventListener("contextmenu", (event) => {
	event.preventDefault();

	const { clientX: mouseX, clientY: mouseY } = event;

	contextMenu.style.top = `${mouseY}px`;
	contextMenu.style.left = `${mouseX}px`;
	contextMenu.classList.add('visible');
	contextMenu.style.display='block';
	contextMenu.style.zIndex=20000;
	contextMenu.style.position='fixed';
	contextMenu.style.width="360px";
	contextMenu.style.borderRadius="5px";

 
    });

    scope.addEventListener("click", (e) => {
	  if (e.target.offsetParent != contextMenu) {
	  contextMenu.style.display='none';
	  }
    });

    };

    document.addEventListener('DOMContentLoaded', view);	
	
    function contextMenuadd(contextMenu, menustring,count ){
    var action = function (e) {
		//menuLink;
		let currentRow = $(event.target)[0].parentElement ;
		var index = parseInt(currentRow.row );
		var value = currentRow.textContent ;
		 en(href,'_self');
		 
	  };	


    var menuitem = document.createElement('LI');
    menuitem.addEventListener('click', action);
    menuitem.classList.add("hotspot__item");
    menuitem.innerHTML = '<a href="#">' + menustring + '</a>';
    menuitem.row=count;
 

    contextMenu.appendChild(menuitem);

    };
	
    document.addEventListener('click', function(e){
    let inside = (e.target.closest('#container'));
    if(!inside){
    let contextMenu = document.getElementById('contextMenuId');
    contextMenu.setAttribute('style', 'display:none');
    }
    });