Во-первых, довольно неожиданно выяснилось, что Firefox все еще не поддерживает offsetX/offsetY в MouseEvent для определения координат мыши относительно блока, над которым находится курсор. См. также мою статью «T&P. Canvas и Offset». Это не то, чтобы очень большая проблема, но код, конечно, усложняет, если необходимо сделать его полностью кроссбраузерным.

Достаточно использовать position:relative + layerX/layerY

kichik 6 дек 2011 в 16:07

Ну да, только это не сильно упрощает жизнь сегодня. В целом, судьба layerX/layerY в Firefox пока неопределенна и, возможно, их выпилят в какой-нибудь из следующих версиях вместе с реализацией offsetX/offsetY. Тогда будет проще.

TheShock 6 дек 2011 в 16:08

Ну да, только это не сильно упрощает жизнь сегодня

Аргументируйте.

kichik 6 дек 2011 в 16:14

Это усложняет код. То есть, например, решение на js

var offX, offY;
if (!(e.offsetX || e.offsetY)) {
	offX = e.layerX - $(e.target).position().left;
	offY = e.layerY - $(e.target).position().top;
}
else {
	offX = e.offsetX;
	offY = e.offsetY;
}

или решение через комбинацию css + переключение в коде на ветку, когда offsetX/Y не поддерживается с использованием layerX/Y, — очевидно, сложнее, чем просто использование e.offsetX и e.offsetY. Хотя я же говорю, что это не то, чтобы очень сложно, но как минимум лишнее условие на каждой итерации.

TheShock 6 дек 2011 в 16:18

var x, y;
if (e.layerX == null) { // opera
  x = e.offsetX;
  y = e.offsetY;
} else { // fx, chrome
  x = e.layerX;
  y = e.layerY;
}

По-моему это далеко не самый страшный костыль для кроссбраузерности. Вообще не проблема, имхо. Если бы все траблы так легко решались, то я был бы счаслив!

kichik 6 дек 2011 в 16:22

Я именно об этом и говорю — это небольшая проблема, надеюсь, скоро и этого кода будет не нужно. Мячик на стороне Firefox, в Chrome уже выпилили layerX/layerY.

Кстати, правильнее проверять наличие offsetX/Y, так как именно они являются стандартными и сегодня поддерживаются всеми, кроме Firefox.

alist 6 дек 2011 в 14:46

Симпатичный пример. Вопрос в зал: какие есть способы оптимизации интерактивного рисования на канвасе? Есть ли, например, смысл делать два канваса один под другим и использовать double buffering. Есть ли способы использовать canvas совместно с WebWorkers? У нас несколько агентов рисуют на одном инструменте, и хотелось бы, чтобы в момент, когда один скрипт загружает в канвас изображения, другие агенты не задерживались.

TheShock 6 дек 2011 в 16:38

Есть ли, например, смысл делать два канваса один под другим и использовать double buffering.

Во-первых, лучше избежать лишних дом-операций и перестройки дерева.
Во-вторых, двойную буферизацию использовать для того, для чего она обычно используется (устранение эффекта мерцания из-за не до конца прорисованного кадра) смысла нету — браузер сам буфферизует и не покажет не до конца отрисованный кадр.Два канваса один под другим и буферизацию имеет смысл использовать совсем для других вещей.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий