window.onload = function() { 'use strict' var painting; var context; var x, i, j; var y; var canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); var socket = io.connect("http://localhost:3000"); context.strokeStyle = 'red'; context.lineWidth = 9; context.strokeRect(420, 200, 400, 200); canvas.onmousedown = startDraw; canvas.onmouseup = draw; socket.on( 'startDraw', function( data ) { startDraw( data.x, data.y ); }); function startDraw(e) { 'use strict' painting = true; x = e.pageX; y = e.pageY; } socket.emit( 'startDraw', { x: x, y: y } ); function draw(r) { 'use strict' i = r.pageX; j = r.pageY; if ( painting == true ) { context.strokeStyle = 'red'; context.beginPath(); context.moveTo( x, y ); context.lineTo( i, j ); context.stroke(); } } function stopDraw() { 'use strict' painting = false; }

}

Mistake

Cannot read property 'pageX' of undefined

  • You are passing an object with the keys x and y, and inside the body of the handler you are trying to access the key pageX and pageY. ex and ey you need to use. - dakiesse
  • one
    @dakiesse, is not true. From this such error can not be. - Qwertiy ♦
  • make console.log (e) and you will see everything yourself, as well as put the conclusion of the court - dakiesse
  • MouseEvent {isTrusted: true, screenX: 565, screenY: 330, clientX: 500, clientY: 221 ...} - Roman Pawliw
  • one
    inside the handler, you call startDraw and pass two arguments. I don’t quite understand how you have e in startDraw is a MouseEvent, considering that by calling this function you pass two arguments to it and the first is data.x - dakiesse

1 answer 1

You initially declare the variables x and y that have the data type undefined .

Then you hang up the startDraw function on the canvas.onmousedown handler. And when you click on the canvas , you naturally will call the starDraw function from the MouseEvent arruments.

Further, during the execution of the stream, you just emit the startDraw event by calling socket.emit( 'startDraw', { x: x, y: y } ); . What is the purpose of the call and passing the hash with the values {x: undefined, y: undefined} ? Since I do not understand your idea, I simply indicate to you that the problem is in this line.

UPDATE after normal listing listing:

You succeed in the execution thread by calling socket.emit( 'startDraw', { x: x, y: y } ); with variables x and y that were not initialized at all. window.unload will execute later than socket.emit( 'startDraw', { x: x, y: y } ); !

  • It is necessary to make a draftsman in real - time - Roman Pawliw
  • @RomanPawliw you have too many errors. But because I see you do not understand what scopes are. You have declared variables that are used everywhere in the private scope, namely in the onload handler. Take out the variables x, y, painting, etc. out. - dakiesse
  • @RomanPawliw further use your use strick is meaningless. Why is it? Of course, it does not play a role in this case, but this is unnecessary! - dakiesse
  • @RomanPawliw next, call socket.emit ('startDraw', {x: x, y: y}); you probably still wanted to put the startDraw function inside and thereby notify other customers that YOU are painting on canvas - dakiesse
  • @RomanPawliw further, you also subscribe to the startDraw event and it turns out that you emit this event with the transfer of coordinates and immediately happen and process this event and want what you have already drawn - draw again. The problem with the logic of application behavior. In addition, the 'startDraw' event handler is not written correctly. You must call the draw function inside and pass the object with x and y to it - dakiesse