stepa90

Нажатие на ссылку это тот же onclick событие. Чтобы не происходил переход достаточно вернуть false.
Например

<a id="link" href="https://google.ru/">Нажми чтобы перейти на гугл</a>
<script type="text/javascript">
	document.getElementById('link').onclick = function(){
		if (!confirm('Вы точно хотите перейти?')) {
			return false;
		}
	}
</script>

Дальше думаю понятно. Можно например запустить анимацию через onclick, вернуть в нем false, а после завершения анимации отправить на нужный url... в общем фантазировать можно сколько угодно
По поводу перезагрузки страницы и перехода назад, это событие onbeforeunload, которое так же как onclick можно отменить. Читайте тут

<table id = 'myEmptyTable'>
	<tbody></tbody>
</table>
<script type="text/javascript">
	json = [
		    	{
			        'type'  : 'type1',
			        'pages' : [ 
			            {'name' : 'page1', 'attribute' : ['atr1', 'atr2', 'atr3', 'atr4']},
			            {'name' : 'page2', 'attribute' : ['atr1', 'atr2', 'atr3']},
			            {'name' : 'page3', 'attribute' : ['atr1', 'atr2']},
			        ]  
			    }
			];
	function createTableByJson(jsonPages){
		var tableTbody = document.querySelector('#myEmptyTable tbody');
		for (var i = 0; i < jsonPages.length; i++) {
			//перебираем строки
			for (var y = 0; y < jsonPages[i].attribute.length; y++) {
				//проверяем сколько строк уже создано в таблице
				if (tableTbody.getElementsByTagName('tr').length < y + 1) {
					//если строк меньше то создаем новую
					var newRow = document.createElement('tr');
					tableTbody.appendChild(newRow);
					//тк мы уже знаем что строк было меньше чем нужно добавляем по пустому элементу td в текущую строку, пока не дойдем до текущего столбца
					for (var z = 0; z < i; z++) {
						newRow.appendChild(document.createElement('td'));
					}
				}

				//создаем новую ячейку 
				var newCell = document.createElement('td');
				//вписываем туда текст
				newCell.innerText = jsonPages[i].attribute[y];
				//и добавляем его в строку
				tableTbody.getElementsByTagName('tr')[y].appendChild(newCell);

			}
			//после того как перебрали столбец в json вписываем пусты ячеки в кажду строку что больше числа atribute в текущем столбце
			for (var g = y; g < tableTbody.getElementsByTagName('tr').length; g++) {
				tableTbody.getElementsByTagName('tr')[g].appendChild(document.createElement('td'));
			}
		}
	}
	createTableByJson(json[0].pages)
</script>

убрать alert в левом верхнем углу? возможно просто блок с сообщением?

<div id="message"> сообщение </div>
<script>
 setTimeout(
 n = 5; //число секунд;
  function(){
   document.getElementById('message').style.display = none;
  },
  1000 * n
 )
</script>

Не совсем понятно чем ховер не устроил, но можно использовать события наведения мыши.

если я правильно понял вопрос, то размер меняется в самом теге
<canvas width="200px" height="200px">