Уважаемые знатоки, помогите разобраться с проблемой так как я уже свю голову сломал, ниже скрипт не мой, взял его за основу для своего проекта и перепилил под свои нужды. Всё работает отлично кроме сохранения изображения, то есть изображения сохраняется с правильными размерами и без проблем открывается, только оно пустое (полностью прозрачное). Почему я из 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 во вложении, так как не влез в символьное ограничение.