memish · November 20, 2017 17:35
diff --git a/index.html b/index.html
 <html>
 <head>
 
    <title>Beginners Code</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
        canvas{ border: 1px solid black; }
 
        </style>
          <script src="/socket.io/socket.io.js"></script>
         <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
 
    </head>

    <body style="margin:0;">
 
   
        
    
 
        
        <canvas id="canvas"  ></canvas>
           <form method="post" accept-charset="utf-8" name="form1">
                <input name="hidden_data" id='hidden_data' type="hidden"/>
           </form>
        
        <script> 
         
             var canvas = document.getElementById("canvas");
             var ctx = canvas.getContext("2d");
          
      ctx.canvas.width  = window.innerWidth-3;
       ctx.canvas.height = window.innerHeight-4;
            var socket = io();
           
         
      
     
      

           
          
            
       
           
        
            var gameStart = false;
            var clickX = new Array();
            var clickY = new Array();
            var clickDrag = new Array();
         var paint = false;
           
 	// is this running in a touch capable environment?
        var touchable = 'createTouch' in document,
    	touches = []; // array of touch vectors
            
   if(touchable) {
 	canvas.addEventListener( 'touchstart', onTouchStart, false );
 	canvas.addEventListener( 'touchmove', onTouchMove, false );
 	canvas.addEventListener( 'touchend', onTouchEnd, false );
 	window.onorientationchange = resetCanvas;  
 	window.onresize = resetCanvas;  
       window.onorientationchange = resetCanvas;
            window.onresize = resetCanvas;
    // console.log("Touchable");
   } else {
 	 //console.log("Mouseable");
        window.onresize = resetCanvas;
    canvas.addEventListener( 'mousedown', onMouseDown, false );
    canvas.addEventListener( 'mouseup', onMouseUp, false );
    canvas.addEventListener( 'mouseout', onMouseOut, false );
    canvas.addEventListener( 'mousemove', onMouseMove, false );
   }
            
       $(function () {    
          socket.on('drawR', function(msg){
          
               //  msg --> is variable I recieved
              
          });
    });   
            
 
 //4) break down parts of this draw method into sub methods
        
 function draw() {
     if(gameStart==false){
         resetCanvas();
         gameStart=true;
     }
           ctx.clearRect(0, 0, canvas.width, canvas.height);
             ctx.fillStyle = "gray";
             ctx.fillRect(0, 0, canvas.width, 100);//grey border at top
           ctx.fillStyle = "white";
           ctx.fillRect(0, 45, canvas.width, canvas.height);//drawing canvas
         
  

    
       
   
     
     
 //draw line - free draw    
      
       
 }
           
 

 
 setInterval(draw, 10);
            
  
 
 
            
            
   

 function addClick(x, y, dragging)
 {
     socket.emit('draw', sendMsg);
 }
            

            
    
            
  function controlClickDowns(x_2, y_2){//MOUSE DOWN
      
      
         
      
       if(y_2<40 && x_2>canvas.width/2 && x_2<canvas.width){//clear Screen
           clearIt();
             
         }
         
      
      
  }
            
    function controlClickUp(xx,yy){//MOUSE UP
                
      if(yy<25){
          paint=false;
      }
     
    
     
    
    
            }
            
            
          
            
            
            
       //MOUSE AND TOUCH STUFF==================
                        
 ////MOUSE STUFF
            
  function onMouseDown(event) {
      
      var mouseX = event.offsetX;
      var mouseY = event.offsetY;
 	
      controlClickDowns(mouseX,mouseY);
   }
    
    function onMouseUp(event) {
      paint = false;
    
    }
            
     function onMouseOut(event) {
         paint = false;
    
    }
            
 function onMouseMove(event) {
     
     controlClickUp(event.offsetX,event.offsetY);
              
    }
            
 //Touch Stuff below***************
            
     function onTouchStart(e) {
         
         
 		var touch = event.touches[0];
       var x = touch.pageX;
       var y = touch.pageY;
       var x_2 = touch.pageX - canvas.offsetLeft;
       var y_2 = touch.pageY - canvas.offsetTop; 
         
         controlClickDowns(x_2,y_2);
 }
 
 function onTouchMove(e) {
 	 // Prevent the browser from doing its default thing (scroll, zoom)
 	e.preventDefault();
       var touch = event.touches[0];
       var x = touch.pageX;
       var y = touch.pageY;
 	   var x_2 = touch.pageX - canvas.offsetLeft;
        var y_2 = touch.pageY - canvas.offsetTop;
    
 	 controlClickUp(x_2,y_2);
 } 
 
 function onTouchEnd(e) { 
       paint = false;
    	touches = e.touches; 
     console.log("Touch Started");
   
 }
    
 function resetCanvas (e) {  
 	// resize the canvas - but remember - this clears the canvas too. 
  	canvas.width = window.innerWidth; 
 	canvas.height = window.innerHeight;
 	
 	//make sure we scroll to the top left. 
 	window.scrollTo(0,0); 
 }
        function clearIt(){//clear screen
             
              clickX = [];
              clickY = [];
               clickDrag = [];
               draw();
         }  
            
         function resetCanvas (e) {
            // resize the canvas - but remember - this clears the canvas too.
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            //make sure we scroll to the top left.
            window.scrollTo(0,0);
        }     
            
        </script>
        
    </body>
 
 </html>
	<html>
	<head>

	<title>Beginners Code</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<style>
	canvas{ border: 1px solid black; }

	</style>
	<script src="/socket.io/socket.io.js"></script>
	<script src="https://code.jquery.com/jquery-1.11.1.js"></script>

	</head>

	<body style="margin:0;">






	<canvas id="canvas" ></canvas>
	<form method="post" accept-charset="utf-8" name="form1">
	<input name="hidden_data" id='hidden_data' type="hidden"/>
	</form>

	<script>

	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");

	ctx.canvas.width = window.innerWidth-3;
	ctx.canvas.height = window.innerHeight-4;
	var socket = io();












	var gameStart = false;
	var clickX = new Array();
	var clickY = new Array();
	var clickDrag = new Array();
	var paint = false;

	// is this running in a touch capable environment?
	var touchable = 'createTouch' in document,
	touches = []; // array of touch vectors

	if(touchable) {
	canvas.addEventListener( 'touchstart', onTouchStart, false );
	canvas.addEventListener( 'touchmove', onTouchMove, false );
	canvas.addEventListener( 'touchend', onTouchEnd, false );
	window.onorientationchange = resetCanvas;
	window.onresize = resetCanvas;
	window.onorientationchange = resetCanvas;
	window.onresize = resetCanvas;
	// console.log("Touchable");
	} else {
	//console.log("Mouseable");
	window.onresize = resetCanvas;
	canvas.addEventListener( 'mousedown', onMouseDown, false );
	canvas.addEventListener( 'mouseup', onMouseUp, false );
	canvas.addEventListener( 'mouseout', onMouseOut, false );
	canvas.addEventListener( 'mousemove', onMouseMove, false );
	}

	$(function () {
	socket.on('drawR', function(msg){

	// msg --> is variable I recieved

	});
	});


	//4) break down parts of this draw method into sub methods

	function draw() {
	if(gameStart==false){
	resetCanvas();
	gameStart=true;
	}
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.fillStyle = "gray";
	ctx.fillRect(0, 0, canvas.width, 100);//grey border at top
	ctx.fillStyle = "white";
	ctx.fillRect(0, 45, canvas.width, canvas.height);//drawing canvas








	//draw line - free draw


	}




	setInterval(draw, 10);








	function addClick(x, y, dragging)
	{
	socket.emit('draw', sendMsg);
	}





	function controlClickDowns(x_2, y_2){//MOUSE DOWN




	if(y_2<40 && x_2>canvas.width/2 && x_2<canvas.width){//clear Screen
	clearIt();

	}



	}

	function controlClickUp(xx,yy){//MOUSE UP

	if(yy<25){
	paint=false;
	}





	}






	//MOUSE AND TOUCH STUFF==================

	////MOUSE STUFF

	function onMouseDown(event) {

	var mouseX = event.offsetX;
	var mouseY = event.offsetY;

	controlClickDowns(mouseX,mouseY);
	}

	function onMouseUp(event) {
	paint = false;

	}

	function onMouseOut(event) {
	paint = false;

	}

	function onMouseMove(event) {

	controlClickUp(event.offsetX,event.offsetY);

	}

	//Touch Stuff below***************

	function onTouchStart(e) {


	var touch = event.touches[0];
	var x = touch.pageX;
	var y = touch.pageY;
	var x_2 = touch.pageX - canvas.offsetLeft;
	var y_2 = touch.pageY - canvas.offsetTop;

	controlClickDowns(x_2,y_2);
	}

	function onTouchMove(e) {
	// Prevent the browser from doing its default thing (scroll, zoom)
	e.preventDefault();
	var touch = event.touches[0];
	var x = touch.pageX;
	var y = touch.pageY;
	var x_2 = touch.pageX - canvas.offsetLeft;
	var y_2 = touch.pageY - canvas.offsetTop;

	controlClickUp(x_2,y_2);
	}

	function onTouchEnd(e) {
	paint = false;
	touches = e.touches;
	console.log("Touch Started");

	}

	function resetCanvas (e) {
	// resize the canvas - but remember - this clears the canvas too.
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	//make sure we scroll to the top left.
	window.scrollTo(0,0);
	}
	function clearIt(){//clear screen

	clickX = [];
	clickY = [];
	clickDrag = [];
	draw();
	}

	function resetCanvas (e) {
	// resize the canvas - but remember - this clears the canvas too.
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	//make sure we scroll to the top left.
	window.scrollTo(0,0);
	}

	</script>

	</body>

	</html>