wsrpc/sample/canvas/web/js/main.js

function start(wsrpc){
	// attach on windows resize
	var canvas = document.getElementById("screen")
	var ctx = canvas.getContext("2d");
	ctx.lineWidth = 2;

	function handleResize(evt){
		if (ctx.canvas.width != window.innerWidth ||
			ctx.canvas.height != window.innerHeight) {
		
			console.log("Readapt canvas");
			ctx.canvas.width = window.innerWidth;
			ctx.canvas.height = window.innerHeight;
		}
		wsrpc.call("OnResize",ctx.canvas.width,ctx.canvas.height);
	}
	window.onresize = handleResize
	handleResize();

	// Get Canvas ctx
	console.log("Connected");
	wsrpc.export({
		ping: function() {
			console.log("Client sent ping");
		},
		DrawArc: function(response, x,y,radius,startAngle,endAngle) { 
			//console.log("Drawing arc",x,y,radius,startAngle,endAngle);
			x = x - canvas.offsetLeft
			y = y - canvas.offsetTop
			ctx.beginPath();
			ctx.arc(x,y,radius,startAngle,endAngle,false);
			ctx.stroke();
		},
		Line: function(response, x1,y1,x2,y2) {
			x1 = x1 - canvas.offsetLeft
			y1 = y1 - canvas.offsetTop
			x2 = x2 - canvas.offsetLeft
			y2 = y2 - canvas.offsetTop
			ctx.beginPath();
			ctx.moveTo(x1,y1);
			ctx.lineTo(x2,y2);
			ctx.stroke();
		},
		Clear: function(response) {
			ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
		}
		// Canvas stuff
		//
		
	})

	// Events
	window.onmousemove = function(evt) {
		wsrpc.call("OnMouseMove",evt.pageX,evt.pageY);
	}

}









window.onload = function() {
	wsrpc = new WsRpc();
	wsrpc.onopen = start;
	wsrpc.connect("ws://" + location.host + "/wsrpc");

}