Disabling right click context menu on a HTML Canvas?

Question

Making a painting app using HTML5 and Canvas.

I think I want to have a similar system to applications like Paint and Photoshop where you can have a primary and secondary

Answer 1

This will disable the context menu on the canvas.

<canvas oncontextmenu="return false;"></canvas>

Answer 2

Try this

canvas.oncontextmenu = function (e) {
    e.preventDefault();
};

Answer 3

Avoiding dependence on Jquery Js, I have tried the preventDefault event not only with canvas but also in other elements. Regarding the crossBrowser I reviewed this page: Events - Contextmenu.

You probably need a validation of items that return undefined but it serves as a demonstration.

(function(w, d){
	d.body.addEventListener('contextmenu', function(event){
		var blockContext = [
			{ type: 'tag', value: 'canvas'},
			{ type: 'id',  value: 'fooId'},
			{ type: 'tag',  value: 'img'},
		];
		blockContext.map(
			elm => {
				var _elm
				
				if(elm.type == 'tag') _elm = d.querySelector(elm.value);
				if(elm.type == 'id') _elm = d.getElementById(elm.value);

				if(event.target == _elm) event.preventDefault();
			}
		);
	});
})(window, document);

canvas {
background-color: grey;
}

<canvas></canvas>
<img src="https://via.placeholder.com/200x200"/>
<p id="fooId">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lorem luctus nisi fermentum imperdiet in ac tortor. Vestibulum interdum risus vitae metus finibus pretium. Nullam facilisis lacus nec pellentesque faucibus. In tempus lorem ut mi sodales, vitae scelerisque quam pretium. Duis venenatis enim in nunc laoreet venenatis. Aliquam at magna vitae purus tincidunt posuere. Donec dictum pharetra ipsum, eu auctor lorem aliquet vitae. Donec faucibus metus quis laoreet ultricies. Aliquam aliquet, lectus a tempor tristique, diam sem auctor felis, sed ultrices magna nunc ut sem. Curabitur congue diam lacinia risus sodales luctus. In nec maximus ex. Nulla ultrices diam a erat imperdiet, nec convallis nisl pulvinar. Etiam quis placerat arcu, eu elementum felis. Phasellus lectus massa, faucibus faucibus nibh ut, dignissim tempor neque.
<p/>

Answer 4

You can use this:

$('img').bind('contextmenu', function(e){
    return false;
}); 

See this working example!

With the lastest jQuery:

$('body').on('contextmenu', 'img', function(e){ return false; });

Note: You should use something narrower than body if possible!

Or without jQuery, applying on canvas:

canvas.oncontextmenu = function(e) { e.preventDefault(); e.stopPropagation(); }

---

EDITED

Updated the Fiddle Example to show the contextmenu being limited to the canvas and not the image.

JQUERY

$('body').on('contextmenu', '#myCanvas', function(e){ return false; });

HTML EXAMPLE

<canvas id="myCanvas" width="200" height="100">
  Your browser does not support the canvas element.
</canvas>

<img src="http://db.tt/oM60W6cH" alt="bubu">

Answer 5

Try adding oncontextmenu="return false;" on the body tag. It should disable the context menu.

If I believe this source : http://javascript.about.com/library/blnoright.htm which is google's first result to the query "javascript disable right click" that you should have tried.

Edit :

• about canvas I don't know the element, but did you try calling stopPropagation() on the event element once your function ends ?
• or the previous solution on the canvas tag instead of the body...

Answer 6

This should do the job with more modern (and readable) syntax than the other answers.

const canvas = document.getElementById('myCanvas');
canvas.oncontextmenu = () => false;