HTML5 Canvas, 2nd Edition

Further Explorations with ElectroServer

Displaying text on HTML5 Canvas is interesting, but as we have shown you in this book, you can do much more. Let’s add some graphics to the previous demo. We have added a second application for you to peruse, named CH11EX3.html. This application adds the bouncing ball demo app from Chapter 5 to the chat application we just created. It allows chatters to “send” bouncing balls to each other by clicking on the Canvas.

The heart of the app is simply another use of the EsObject instance from the chat application, which is created when the user clicks on the canvas. This EsObject instance adds information about a ball that one user created for the others in the room:

function eventMouseUp(event) {
   var mouseX;
   var mouseY;
   if (event.layerX ||  event.layerX == 0) { // Firefox
      mouseX = event.layerX ;
      mouseY = event.layerY;
   } else if (event.offsetX || event.offsetX == 0) { // Opera
      mouseX = event.offsetX;
      mouseY = event.offsetY;
   }
   ballcounter++;
   var maxSize = 8;
   var minSize = 5;
   var maxSpeed = maxSize+5;
   var tempRadius = Math.floor(Math.random()*maxSize)+minSize;
   var tempX = mouseX;
   var tempY = mouseY;
   var tempSpeed = maxSpeed-tempRadius;
   var tempAngle = Math.floor(Math.random()*360);
   var tempRadians = tempAngle * Math.PI/ 180;
   var tempvelocityx = Math.cos(tempRadians) * tempSpeed;
   var tempvelocityy = Math.sin(tempRadians) * tempSpeed;
   var pmr = new PublicMessageRequest();
   pmr.message = "";
   pmr.roomId = _room.id;
   pmr.zoneId = _room.zoneId;
   var esob =