trushka

По запросу в гугле "javascript print calendar" очень много результатов, изучайте. Например
вот
или вот

Не делать через AJAX.

НЕ?

<form method="post" action=" {URL} ">

Если сильно надо, создай временную форму из внутренних данных и засабмить JS-ом.

Если это корзина. То делать её без формы ни в коем случае нельзя. Потом СЕО-шник не сможет скринить Цели по AJAX форме.

1. document.lastModified


2. XMLHttpRequest.getResponseHeader()

Вообщем вот написал на основе квадратичной кривой безье.
Но в идеале нужно еще написать сглаживание. Атрибут canvas data-offset задает насколько сильное скругление , data-url ссылка на изображение .
Ну и самая главная проблема, чтобы работал с изображениями
раскоментируй строку //ctx.drawImage(img,0,0,ctxW,ctxH - offset); и закоментируй
ctx.fillRect(0,0,ctxW,ctxH - offset);
Ссылка которая будет в data-url должна быть на том же хосте что и скрипт! Тоесть если ссылка на сайт localhost/page.php то и ссылка на изображение localhost/.../name.jpg
Или ссылка должна быть на сервере с параметром Access-Control-Allow-Origin "*" иначе сработает защита и выкинет исключение

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Вот пример деформации

Вам нужно изменять не background, а применять фильтры https://html5book.ru/css3-filtry/

Чтобы не "прыгало" замените width на max-width для картинок и padding на margin у .image-portfolio

p.s.
Еще нужно пересмотреть структуру. Очень много лишних div.
И для картинок с подписями отлично подходят теги figure и figcaption.