Отключить обновление страницы, после отправки формы

При отправке формы, на странице должен отрисовываться canvas. Но после того как форма отправлена, canvas отрисовывается на долю секунды и потом исчезает. Как сделать так, чтобы после отправки, canvas оставался на месте.
html code:

Enter math expression:

js:
function drawShelves() { var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d');
canvas.width = 800; canvas.height = 400;
ctx.lineWidth = 1.0; ctx.strokeStyle = 'black'; ctx.beginPath();
// left shelve ctx.strokeRect(5, 100, 340, 10); ctx.moveTo(5, 110); for (var i = 5; i < 340; i+=10) { ctx.lineTo(i+10, 100); ctx.moveTo(i+10, 110); }
// right shelve ctx.strokeRect(455, 100, 340, 10); ctx.moveTo(455, 110); for (var i = 455; i < 790; i+=10) { ctx.lineTo(i+10, 100); ctx.moveTo(i+10, 110); } ctx.stroke(); }

Ответ

Есть два варианта.
Отключить событие нажатия на кнопку по умолчанию:
Отключить событие отправки формы по умолчанию:

Но в обоих случаях вам нужно каким-либо образом без перезагрузки страницы отправить данные на сервер. Самый верный способ -- использовать Ajax запрос. Поэтому код будет проще переписать следующим образом:

function drawShelves() { // здесь отрисовка канвы
// здесь ajax запрос
return false; }
Подробнее про Ajax можно прочитать здесь: http://javascript.ru/ajax/intro