userControls Property

Object.defineProperty(InteractiveService.prototype, 'userControls', 
	get: function() 
) 

drawCanvas: function (context, width, height) { 
   context.strokeStyle = "#FFFF00"; 
   context.lineWidth = 4; 
   context.beginPath(); 
   context.moveTo(0, 0); 
   context.lineTo(width, 0); 
   context.lineTo(width, height); 
   context.lineTo(0, height); 
   context.closePath(); 
   context.stroke(); 
   context.strokeStyle = "#000000"; 
   context.fillStyle = "#FFFF00"; 
   context.beginPath(); 
   context.arc(100, 100, 50, 0, Math.PI * 2, true); 
   context.closePath(); 
   context.stroke(); 
   context.fill(); 
   context.strokeStyle = "#000000"; 
   context.fillStyle = "#FFFFFF"; 
   context.beginPath(); 
   context.arc(80, 80, 8, 0, Math.PI * 2, true); 
   context.closePath(); 
   context.stroke(); 
   context.fill(); 
   context.fillStyle = "#009966"; 
   context.beginPath(); 
   context.arc(80, 80, 5, 0, Math.PI * 2, true); 
   context.closePath(); 
   context.fill(); 
   context.strokeStyle = "#000000"; 
   context.fillStyle = "#FFFFFF"; 
   context.beginPath(); 
   context.arc(120, 80, 8, 0, Math.PI * 2, true); 
   context.closePath(); 
   context.stroke(); 
   context.fill(); 
   context.fillStyle = "#009966"; 
   context.beginPath(); 
   context.arc(120, 80, 5, 0, Math.PI * 2, true); 
   context.closePath(); 
   context.fill(); 
   context.fillStyle = "#000000"; 
   context.beginPath(); 
   context.moveTo(93, 100); 
   context.lineTo(100, 93); 
   context.lineTo(107, 100); 
   context.lineTo(100, 107); 
   context.closePath(); 
   context.fill(); 
   context.strokeStyle = "#000000"; 
   context.beginPath(); 
   context.moveTo(70, 110); 
   context.quadraticCurveTo(100, 150, 130, 110); 
   context.quadraticCurveTo(100, 150, 70, 110); 
   context.closePath(); 
   context.stroke(); 
}, 
 
example: function () { 
   // Check if have already added the custom canvas, if so, nothing to do 
   var canvas = document.getElementById("customCanvas"); 
   if (canvas != null) 
      return; 
 
   // Create a canvas element and add it on top of the viewer 
   var div = document.getElementById(this._imageViewer.mainDiv()); 
   var delta = 16; 
   var x = delta; 
   var y = delta; 
   var width = div.clientWidth - delta * 2; 
   var height = div.clientHeight - delta * 2; 
   var parent = div.parentNode; 
   canvas = document.createElement("canvas"); 
   canvas.style.position = "absolute"; 
   canvas.width = width; 
   canvas.height = height; 
   canvas.style.pixelLeft = x; 
   canvas.style.pixelTop = y; 
   canvas.id = "customCanvas"; 
   parent.appendChild(canvas); 
   var context = canvas.getContext("2d"); 
   this.drawCanvas(context, width, height); 
 
   // Without the following line, clicking anywhere on top of the custom canvas will 
   // not pass to the service and panning and zooming will not work. 
   this._imageViewer.interactiveService.userControls.add(canvas); 
 
   // Re-start the default interactive mode, this will take care of 
   // setting the correct mouse pointer (if available) 
   if (this._imageViewer.defaultInteractiveMode != null) { 
      this._imageViewer.defaultInteractiveMode.stop(this._imageViewer); 
      this._imageViewer.defaultInteractiveMode.start(this._imageViewer); 
   } 
},