Canvas save (пустая картинка на выходе)
 

Уважаемые знатоки, помогите разобраться с проблемой так как я уже свю голову сломал, ниже скрипт не мой, взял его за основу для своего проекта и перепилил под свои нужды. Всё работает отлично кроме сохранения изображения, то есть изображения сохраняется с правильными размерами и без проблем открывается, только оно пустое (полностью прозрачное). Почему я из canvas получаю "data:image/png;base64" с пустым изображением, когда оно там отрисовано и все пременяемые к нему фильтры отлично работают?

<div id="editor">
    <div class="contentsEditImg">
         <div id="placeholder"></div>
         <canvas id="canvas2d"></canvas>
          <div id="nubs" ></div>
    </div>
</div>

$('#save').click(function() {
		var canvasData = canvas.toDataURL('image/png'); 
		$.ajax({ 
		 	type:"POST", 
			url:"lib_ServerScript/SaveImages.php", 
			data:{"canvasData":canvasData},
			dataType: "application/upload",
		 	success: function(data){
				}
			});
		
		console.log(canvasData);
        
    });

if (isset($_POST['canvasData'])){
	$imageData=$_POST['canvasData'];
	$filteredData=substr($imageData, strpos($imageData, ",")+1);
	$unencodedData=base64_decode($filteredData);
	$file = fopen('pic.png',w);
	fwrite($file, $unencodedData);
	fclose($file);
	echo'ok';
}

Весь скрипт js во вложении, так как не влез в символьное ограничение.

jQuery шлет POST запрос с типом application/x-www-form-urlencoded, а не multipart/form-data, поэтому для всех параметров выполняется uncodeURIComponent.

Дело не в этом.

console.log(canvasData);
выдает пустую картинку.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAooAAANsCAYAAAD cHomnAAAIt0lEQVR4nO3BMQEAAADCoPVPbQlPoAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgKcBx koAAfo2fyEAAAAASUVORK5CYII=