kek3

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
</head>
<body>
    <script type="text/javascript">
        window.addEventListener("load", evenWindowLoaded, false);

        var context, theCanvas, dataUrl;
        var Debugger = function(){};
        Debugger.log = function(message){
            try{console.log(message); }
            catch(exception){
                return;}
        }

        function evenWindowLoaded(){
            startTheApp();
			drawGraph();
        }
        function canvasSupport(){
            return !!document.createElement('canvas').getContext;
        }
        function startTheApp(){
            if(!canvasSupport()){
                Debugger.log("Something went wrong");
                return false;
            }
            theCanvas = document.getElementById("canvasOne");
            context = theCanvas.getContext("2d");
            dataUrl = theCanvas.toDataURL();
        }

		function drawGraph(grafiek){
			switch(grafiek){
				case "staaf":
					barGraph();
					break;
			}
		}
		function barGraph(){
			Debugger.log("test");


                context.strokeStyle = "#000";

                var coords = [];
                context.beginPath();
				context.rect(50, 500, 1, 5);
                for (var i = 1; i < 5; i++){
                    coords[i] = document.getElementById("kek" + i).value;
                    context.rect((i + 20)* i + 50, 500, i, -coords[i]);
                    context.fill();
                }
                context.closePath();
			}

    </script>


</body>
    <canvas id="canvasOne" width="500" height="500">Helaas, je browser werkt niet mee.</canvas>
	<button type="button" onclick="drawGraph('staaf')">Teken staafgrafiek</button>
	<button type="button">Teken cirkelgrafiek</button>
	<button type="button">Teken anderegrafiek</button>
	<button type="button">Teken anderegrafiek</button>
	<button type="button">Teken anderegrafiek</button><br>
	Waarde1: <input type="text" name="Waarde1" id="kek1"><br>
	Waarde2: <input type="text" name="Waarde2" id="kek2"><br>
	Waarde3: <input type="text" name="Waarde3" id="kek3"><br>
	Waarde4: <input type="text" name="Waarde4" id="kek4"><br>
	Waarde5: <input type="text" name="Waarde5" id="kek5"><br>
</html>