Показать сообщение отдельно
  #1 (permalink)  
Старый 21.07.2016, 21:36
Новичок на форуме
Отправить личное сообщение для fireballpro100 Посмотреть профиль Найти все сообщения от fireballpro100
 
Регистрация: 20.12.2014
Сообщений: 9

Магия исчезающего canvas'a
Выручайте друзья! Ума не приложу в чём беда.

Есть canvas на странице, при разворачивании браузера, canvas - исчезает. Проблема наблюдается только в опере (вплоть до последних версий). Никаких "периодических методов" не вызывается (т.е. setTimeout, setInterval - отсутствуют). Даже в голову не приходит, что может провоцировать такое поведение.

Особенности:
1) Если браузер открыт в окне (не во весь экран), то после разворачивания - всё нормально.

2) Когда canvas пропадает, достаточно перейти на другую вкладку в браузере и вернутся, как он появится снова.

Пример сие-чуда можно посмотреть здесь:
http://colorights.com/materials.php?cat=6&id=6

Выкладываю код самого canvas'a, но честно, не думаю, что проблема в нём:

var range = 30; //Толщина кисти по умолчанию
	var xpositionmouse = '';
	var imageColor = '0'; //Цвет текстуры
	
	function canvasHelper(cat, pic, number){
		$(".canvas_helper").css("backgroundImage", "url('cats/" + cat + "/" + pic + "/" + number + ".png')");
		$(".canvas_helper").css("display", "inherit");
	}
	
	function closeCanvasHelper(){
		$(".canvas_helper").css("display", "none");
	}
	
	function targetColor(color){
		for(var i = 0; i < 7; i++){
			$("#textureimage" + i).css("border", "3px solid #FFF");
		}
		
		$("#textureimage" + color).css("border", "3px solid #000");
	}
	
	function changeColor(color){
		var texture = document.getElementById(color); 
		var pattern = ctx.createPattern(texture, 'repeat');
		ctx.fillStyle = pattern;
	}
	
	function SeeImg(color){
		img = document.getElementById(color);
		ctx.drawImage(img,0,0);
	}

	
	//Инициализация канвас
	var canvas,ctx,w,h;
	var img,img2,startDraw,texture,pattern,x1,x2,color;
	function init(){
		canvas = document.getElementById("canvas");
		canvas.width = widthcolor;
		canvas.height = heightcolor;
		w = canvas.width;
		h = canvas.height;
		ctx = canvas.getContext('2d');
		ctx.strokeRect(0,0,w,h);

		//Отрисовка фонового изображения
		/*img = document.getElementById("img0");
		ctx.drawImage(img,0,0);*/
		SeeImg("img0");
		
		
		changeColor('img0');
		
		//Функция отрисовки
		drawing = function(tool){
		x1=0;
		x2=(Math.PI/180)*360;
			if(startDraw){
				ctx.lineWidth = range;
				ctx.lineCap = 'round';
				switch(tool){
					case 'pen':
					ctx.beginPath();
					ctx.arc(x, y, range, x1, x2);
					ctx.fill();
					window.xpositionmouse = window.xpositionmouse + x + ',' + y + ',' + range + ':'+imageColor+'\n';
					break;
				}
			}
		}
		
		startDraw = true;
		
		//События мыши
		canvas.addEventListener('mouseover', function(e){
			canvas.addEventListener('mousemove', function(e){
				e = e || event;
				var coords = this.getBoundingClientRect();
				x = Number(e.clientX - coords.left);
				y = Number(e.clientY - coords.top);
				//x = e.pageX - canvas.offsetLeft; //Координата X
				//y = e.pageY - canvas.offsetTop; //Координата Y
				drawing('pen');
			}, false);
		}, false);
		
		
		function print_img() {
			var dataURL = canvas.toDataURL();
		}
	}



Также, прикрепляю скриншоты проблемы(до и после), заранее, благодарю всех!




Ребят, я не прошу вас ковыряться в коде всего сайта, просто, если кому-то известно, из-за чего может такое случиться, прошу написать. Не думаю, что есть сильно много вещей, которые могут так "напакастить". Какая-то специфическая особенность оперы это вызывает или какая-то моя ошибка, которую исправляют все браузеры кроме оперы..
Ответить с цитированием