Как запретить scroll, пока не просмотришь содержимое?

WbICHA, меня интересует способ реализации конкретно моего вопроса. Никакие другие нововведения не нужны.

Как запретить вылезать за границы при рисовании?

Alexandroppolus, приветствую. Обычная png без фона с черными контурами рисунка.

Как запретить вылезать за границы при рисовании?

const canvas = new fabric.Canvas(
  'drawing', {
    isDrawingMode: true
  }
);
canvas.freeDrawingBrush.color = 'red'

const circle = new fabric.Circle({
  top: 25,
  left: 25,
  radius: 50,
  fill: 'white',
  stroke: 'black'
});

canvas.clipPath = circle;

// add the circle to the canvas
canvas.add(circle);

Нашел здесь: jsfiddle.net/synamqvu

Как пример, есть круг, дальше круга закрашивать ничего нельзя.
Как я понимаю из примера, clipPath ставится на эту фигуру, но как быть, если в моем примере подгружается изображение и подобным образом такое нельзя сделать?
Если выставлять координаты, что также можно сделать, но на выходе ожидается 300+ различных раскрасок и для каждой из них задавать вручную координаты для каждой области раскрашивания - это будет очень сложно и займет вечность.

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

(function() {

	const scheme = [
		{
			image : 'test4'
		}
	];

	let currentImage = 0, imagePath = 'image/draw/';

	let $ = function(id){return document.getElementById(id)};

	let canvas = this.__canvas = new fabric.Canvas('c', {
		isDrawingMode: true,
	});



	fabric.Object.prototype.transparentCorners = false;

	let drawingColorEl = $('drawing-color'),
		drawingLineWidthEl = $('slider-line-width'),
		clearEl = $('clear-canvas'),
		rasterize = $('rasterize'),
		colorpicker = $('colorpicker');

	// color picker
	cp = ColorPicker(document.getElementById('slide'), document.getElementById('picker'),
		function(hex, hsv, rgb, mousePicker, mouseSlide) {
			currentColor = hex;
			ColorPicker.positionIndicators(
				document.getElementById('slide-indicator'),
				document.getElementById('picker-indicator'),
				mouseSlide, mousePicker
			);
			canvas.freeDrawingBrush.color = hex;
			drawingColorEl.value = hex;
            jQuery('#colorpicker').css({'border-color':hex})
		});
	cp.setHex('#e61cef');
	// color picker end

	clearEl.onclick = function() { canvas.clear() };

	jQuery( ".scheme" ).on( "click", function() {
		console.log("CLICK");
		jQuery('.scheme').removeClass('current');
		let current = jQuery( this );
		current.addClass('current');

		if ( current.hasClass("krestik") ) {

			jQuery('.krestikCategory').addClass('current');

		}else if(current.hasClass("krestikCategory")){
			jQuery( ".krestik[value=" + current.val() + "]" ).addClass('current');
			//current.val()

		}

		currentImage = jQuery( this ).val();
		canvas.clear();
		canvas.setOverlayImage(imagePath + scheme[currentImage].image + '.png', canvas.renderAll.bind(canvas));
		canvas.loadFromJSON(scheme[currentImage].json); //
		canvas.renderAll();

	});

	jQuery("#slider-line-width").slider({
		//reversed: true
	});
	jQuery("#slider-line-width").on('slide', function(slideEvt) {
		jQuery("#drawing-line-width").text(slideEvt.value);
	});

	drawingColorEl.onchange = function() {
		canvas.freeDrawingBrush.color = this.value;
	};
	drawingLineWidthEl.onchange = function() {
		canvas.freeDrawingBrush.width = parseInt(this.value, 10) || 1;
		jQuery("#drawing-line-width").text(this.value);
	};
	if (canvas.freeDrawingBrush) {
		canvas.freeDrawingBrush.color = drawingColorEl.value;
		canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;
	}

	// Add mouse events
	// ----------------


	canvas.on('mouse:down', function(options) {

	});

	canvas.on('mouse:move', function(options) {

	});
	canvas.on('mouse:up', function(options) {
		scheme[currentImage].json = JSON.stringify(canvas);
	});

	canvas.setOverlayImage(imagePath + scheme[0].image + '.png', canvas.renderAll.bind(canvas));
	jQuery('.vosmerka').addClass('current');

	//--------------end canvas to png image-----------------------
})();

Подскажите, что можно с этим сделать?

Как сделать раскраску?

Это не ответ на мои вопросы) Тем более, учитывая, что там идет заполнение, а не раскраска :)
Ваш ответ неправильный)))

Как правильно получить массивы из формы в POST и отправить?

Роман Юрьевич Ипатьев $message = "";

:D

Все, мне стыдно)))

Как правильно получить массивы из формы в POST и отправить?

Спасибо, теперь выводит массивы правильно. Но при этом все равно отправляет пустое сообщение, даже убрав json_decode в $_POST.
Версия PHP 5.6.40, json_decode должен поддерживать.