GTD - Draw curves

by Milan Gladiš

HTML

<div id="sketch">
	<canvas id="paint"></canvas>
</div>

CSS

html, body {
	width: 100%;
	height: 100%;
}
#sketch {
	border: 1px solid gray;
	height: 100%;
}

JavaScript

(function() {
	var canvas = document.querySelector('#paint');
	var ctx = canvas.getContext('2d');
	
	var sketch = document.querySelector('#sketch');
	var sketch_style = getComputedStyle(sketch);
	canvas.width = parseInt(sketch_style.getPropertyValue('width'));
	canvas.height = parseInt(sketch_style.getPropertyValue('height'));

	var mouse = {x: 0, y: 0};
	var last_mouse = {x: 0, y: 0};
	
	/* Mouse Capturing Work */
	canvas.addEventListener('mousemove', function(e) {
		last_mouse.x = mouse.x;
		last_mouse.y = mouse.y;
		
		mouse.x = e.pageX - this.offsetLeft;
		mouse.y = e.pageY - this.offsetTop;
	}, false);
	
	
	/* Drawing on Paint App */
	ctx.lineWidth = 2;
	ctx.lineJoin = 'round';
	ctx.lineCap = 'round';
	ctx.strokeStyle = '#999';
	
	canvas.addEventListener('mousedown', function(e) {
		canvas.addEventListener('mousemove', onPaint, false);
	}, false);
	
	canvas.addEventListener('mouseup', function() {
		canvas.removeEventListener('mousemove', onPaint, false);
	}, false);
	
	var onPaint = function() {
	  ctx.clearRect(0, 0, canvas.width, canvas.height);
		ctx.beginPath();

    //context.moveTo(200, 200);
    centerx = (200 + mouse.x)/2;
    mody = (200 + mouse.y)/2;

    
    console.log('lastm.x ' + 200);
    console.log('lastm.y ' + 200);
    console.log('modx.x ' + centerx);
    console.log('mody ' + mody);
    console.log('mouse.x ' + mouse.x);
    console.log('mouse.y ' + mouse.y);
    console.log('—');
    
//ctx.moveTo(last_mouse.x, last_mouse.y);
    ctx.moveTo(200, 200);
/*    
	Pseudo code
	1st curve - draw curve from start to center between mouse and start
	2nd curve from center to mast mouse position
*/
    /////////// EDIT ->  ctx.bezierCurveTo(last_mouse.x, last_mouse.y, centerx, centery, mouse.x, mouse.y);
    
		ctx.lineTo(mouse.x, mouse.y);
//		ctx.closePath();
		ctx.stroke();
	};
	
}());