function initCanvas() {

	//canvas om op te tekenen
	canvas = document.createElement('canvas');
	canvas.setAttribute('width', 2000);
	canvas.setAttribute('height', 2000);
	//canvas.setAttribute('width', docwidth);
	//canvas.setAttribute('height', docheight-headerheight);
	canvas.setAttribute('id', 'canvas');
	canvasdiv.appendChild(canvas);
	if( typeof G_vmlCanvasManager != 'undefined') {
		canvas = G_vmlCanvasManager.initElement(canvas);
	}
	context = canvas.getContext("2d");

	//canvas voor de colour header
	canvascolour = document.createElement('canvas');
	canvascolour.setAttribute('width', docwidth);
	canvascolour.setAttribute('height', 50);
	canvascolour.setAttribute('id', 'canvascolour');
	footerdiv.appendChild(canvascolour);
	if( typeof G_vmlCanvasManager != 'undefined') {
		canvascolour = G_vmlCanvasManager.initElement(canvas);
	}
	colourcontext = canvascolour.getContext("2d");

}

function Drawcolours() {

	canvascolour.width = canvascolour.width;

	//kleurtjes tekenen op de kleuren bar
	for( i = 1; i < Colours.length; i++) {
		colourcontext.beginPath();
		colourcontext.fillStyle = Colours[i];
		colourcontext.strokeStyle = "#ffffff";

		colourcontext.lineWidth = 2;

		if(Activecolour == Colours[i]) {
			colourcontext.lineWidth = 8;
		}
		colourcontext.arc(i * Colourspacing, 25, Toolradius, 0, Math.PI * 2, true);
		colourcontext.stroke();
		colourcontext.fill();
	}

}

function setCSS() {
	headerdiv.style.height = headerheight;
	footerdiv.style.height = headerheight;
	headerdiv.style.backgroundColor = headerbackgroundcolour;
	footerdiv.style.backgroundColor = headerbackgroundcolour;

	canvasdiv.style.top = headerheight;

}

function rePosition() {
	docwidth = window.innerWidth;
	docheight = window.innerHeight;

	canvasdiv.style.height = docheight - 2 * headerheight;
	canvasdiv.style.width = docwidth;
	headerdiv.style.width = docwidth;
	footerdiv.style.width = docwidth;

	penseel.style.left = '0px';
	kwast.style.left = 1 * Headerspacing + 'px';
	roller.style.left = 2 * Headerspacing + 'px';
	gummetje.style.left = 3 * Headerspacing + 'px';
	undo_button.style.left = 5 * Headerspacing + 'px';
	redo_button.style.left = 6 * Headerspacing + 'px';
	kleurplaatbutton.style.left = docwidth - 2 * Headerspacing + 'px';
	newbutton.style.left = docwidth - Headerspacing + 'px';
}