Выручайте друзья! Ума не приложу в чём беда.
Есть 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();
}
}
Также, прикрепляю скриншоты проблемы(до и после), заранее, благодарю всех!
Ребят, я не прошу вас ковыряться в коде всего сайта, просто, если кому-то известно, из-за чего может такое случиться, прошу написать. Не думаю, что есть сильно много вещей, которые могут так "напакастить". Какая-то специфическая особенность оперы это вызывает или какая-то моя ошибка, которую исправляют все браузеры кроме оперы..
