>Форум Mozilla Россия
   http://forum.mozilla-russia.org/index.php
>Разработка
   http://forum.mozilla-russia.org/viewforum.php?id=18
>Не работает canvas
   http://forum.mozilla-russia.org/viewtopic.php?id=64169

surranov > 10-07-2014 16:41:21

Не работает следующий код в FF (последняя версия), при этом например в IE все работает нормально.
(при нажатии должна рисоваться линия в блоке canvas)

Так же при выводе например "alert("x: "+event.offsetX)" выдает "x: undefind". И это только в FF.

скрытый текст
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript">
var canvas, ctx, w, h;
var flag = 0;
function init(){
canvas = document.getElementById("canvas");
w = canvas.width;
h = canvas.height;
ctx = canvas.getContext('2d');
ctx.strokeRect(0,0,w,h);

canvas.addEventListener("mousedown",function (event){
ctx.beginPath();
ctx.moveTo(event.offsetX, event.offsetY);
flag=0;
canvas.addEventListener('mousemove', function (event) {
if(flag==0){
    ctx.lineTo(event.offsetX, event.offsetY);
    ctx.stroke();
}
canvas.addEventListener('mouseup', function (event){
flag=1;
}, false);
}, false);

}, false);

}
</script>
</head>
<body onload="init()">
    <canvas id="canvas" width="400" height="300">не поддерживается</canvas>
</body>
</html>

Infocatcher > 11-07-2014 00:02:55
surranov пишет

Так же при выводе например "alert("x: "+event.offsetX)" выдает "x: undefind". И это только в FF.

А причем тут canvas?

offsetX/Y отсутствуют в стандарте:
http://www.w3.org/TR/DOM-Level-2-Events … MouseEvent
https://dvcs.w3.org/hg/dom3events/raw-f … ouseevents

Есть, правда, еще какой-то http://www.w3.org/TR/cssom-view/#extens … -interface
И заодно https://bugzilla.mozilla.org/show_bug.cgi?id=69787

Можно попробовать вот так:

Выделить код

Код:

var rc = canvas.getBoundingClientRect
    ? canvas.getBoundingClientRect()
    : { left: canvas.offsetLeft || 0, top: canvas.offsetTop || 0 };

и

Выделить код

Код:

ctx.moveTo(event.offsetX || event.clientX - rc.left, event.offsetY || event.clientY - rc.top);
Выделить код

Код:

ctx.lineTo(event.offsetX || event.clientX - rc.left, event.offsetY || event.clientY - rc.top);