var $document, canvas, context;

chrome.extension.sendMessage({}, function(response) {
	var readyStateCheckInterval = setInterval(function() {
	if (document.readyState === "complete") {
		clearInterval(readyStateCheckInterval);

		// init canvas
		canvas = document.createElement('canvas');
		context = canvas.getContext('2d');
		$document = $(document);
		canvas.id = 'webotate';
		canvas.height = $document.height();
		canvas.width = $document.width();
		canvas.style.backgroundColor = 'transparent';
		canvas.style.position = 'absolute';
		canvas.style.zIndex = 9001;
		// initially canvas is display: none
		canvas.style.display = 'none';
		$('body').prepend(canvas);

		// init canvas events
		initCanvasEvents();

	}
	}, 10);
});

// toggle visibility of canvas on page action press
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
	if(request.data === 'DisplayBlock') {
		canvas.style.display = 'block';
		sendResponse();
	} else if(request.data === 'DisplayNone') {
		canvas.style.display = 'none';
		sendResponse();
	}
});

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

function redraw(){
	context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
  
	context.strokeStyle = "#df4b26";
	context.lineJoin = "round";
	context.lineWidth = 5;
			
	for(var i=0; i < clickX.length; i++) {		
		context.beginPath();
		if(clickDrag[i] && i){
			context.moveTo(clickX[i-1], clickY[i-1]);
		} else {
			context.moveTo(clickX[i]-1, clickY[i]);
		}
		context.lineTo(clickX[i], clickY[i]);
		context.closePath();
		context.stroke();
	}
}

function addClick(x, y, dragging)
{
	clickX.push(x);
	clickY.push(y);
	clickDrag.push(dragging);
}

function initCanvasEvents() {
	var $canvas = $(canvas);

	$canvas.mousedown(function(e){
		var mouseX = e.pageX - this.offsetLeft;
		var mouseY = e.pageY - this.offsetTop;

		paint = true;
		addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
		redraw();
	});

	$canvas.mousemove(function(e){
		if(paint){
			addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
			redraw();
		}
	});
	
	$canvas.mouseup(function(e){
		paint = false;
	});
	
	$canvas.mouseleave(function(e){
		paint = false;
	});
}
@@ -564,16 +564,53 @@
 = 9001;%0A
+%09%09canvas.style.cursor = 'crosshair';%0A
 %09%09// ini
@@ -1108,27 +1108,18 @@
 lickX = 
-new Array()
+%5B%5D
 ;%0Avar cl
@@ -1125,27 +1125,18 @@
 lickY = 
-new Array()
+%5B%5D
 ;%0Avar cl
@@ -1149,19 +1149,10 @@
 g = 
-new Array()
+%5B%5D
 ;%0Ava
@@ -1178,16 +1178,17 @@
 redraw()
+ 
 %7B%0A%09conte
@@ -1303,17 +1303,17 @@
 e = 
-%22
+'
 #df4b26
-%22
+'
 ;%0A%09c
@@ -1334,15 +1334,15 @@
 n = 
-%22
+'
 round
-%22
+'
 ;%0A%09c
@@ -1377,17 +1377,19 @@
 or(var i
-=
+ = 
 0; i %3C c
@@ -1409,17 +1409,16 @@
  i++) %7B%09
-%09
 %0A%09%09conte
@@ -1646,24 +1646,455 @@
 ke();%0A%09%7D%0A%7D%0A%0A
+function draw() %7B%0A%09context.strokeStyle = '#df4b26';%0A%09context.lineJoin = 'round';%0A%09context.lineWidth = 5;%0A%0A%09context.beginPath();%0A%09if(clickDrag%5BclickX.length - 1%5D)%0A%09%09context.moveTo(clickX%5BclickX.length - 2%5D, clickY%5BclickY.length - 2%5D);%0A%09else%0A%09%09context.moveTo(clickX%5BclickX.length - 1%5D - 1, clickY%5BclickY.length - 1%5D);%0A%09context.lineTo(clickX%5BclickX.length - 1%5D, clickY%5BclickY.length - 1%5D);%0A%09context.closePath();%0A%09context.stroke();%0A%7D%0A%0A
 function add
@@ -2437,18 +2437,16 @@
 Top);%0A%09%09
-re
 draw();%0A
@@ -2571,18 +2571,16 @@
 ue);%0A%09%09%09
-re
 draw();%0A

add draw() that doesn't draw every point and clear whole canvas