[Malleys]

рисуется окружность, внутрь вставляется картинка, типа круглой кнопки...

<canvas width="100" height="100"></canvas>
<script>
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
let index = 0;
const CIRCLE_X = 50, CIRCLE_Y = 50, CIRCLE_R = 40;
				
const loadedImages = Promise.all([
	"https://picsum.photos/id/237/100/100",
	"https://picsum.photos/id/238/100/100"
].map(src => new Promise((resolve, reject) => {
	const image = new Image()
	image.onload = resolve.bind(null, image)
	image.src = src
})));

loadedImages.then(changeImage);

function changeImage(images) {
	context.clearRect(0, 0, canvas.width, canvas.height);
	const image = images[index++ % images.length];
	context.save();
	context.beginPath();
	context.arc(CIRCLE_X, CIRCLE_Y, CIRCLE_R, 0, 2 * Math.PI, true);
	context.closePath();
	context.clip();
	context.drawImage(image, CIRCLE_X - CIRCLE_R, CIRCLE_Y - CIRCLE_R, 2 * CIRCLE_R, 2 * CIRCLE_R);
	context.restore();
}

canvas.addEventListener("click", event => {
	if((event.offsetX - CIRCLE_X) ** 2 + (event.offsetY - CIRCLE_Y) ** 2 <= CIRCLE_R ** 2)
		loadedImages.then(changeImage);
});
</script>

Картинки меняются по кругу. Нажатие считается в случае нажатия внутрь круга.