pythagoraskitty/fingerpaint.html

## fingerpaint.html
<!DOCTYPE html>
<html>
    <head>
        <title>Fingerpaint</title>
        <style>
            h1
            {
                font-family: Arial;
            }
            canvas
            {
                border: 1px solid black;

            }
            label
            {
                font-family: Arial;
            }
        </style>
    </head>
    <body>
        <h1>Fingerpaint</h1>
        <canvas id="myCanvas" width="600px" height="600px"></canvas><br/>
        <label for="color">Color: </label><input type="color" id="color"/><br/>
        <label for="stroke">Stroke Width: </label><input type="range" min="0" max="25" id="stroke"/><br/>
        <button id="btnClear">Clear</button>
        <script>
            var drawing = false;

            var context = document.getElementById('myCanvas').getContext("2d");
            document.getElementById('myCanvas').addEventListener("mousedown", downOnCanvas);
            document.getElementById('myCanvas').addEventListener("mouseup", upOnCanvas);

            document.getElementById('myCanvas').addEventListener("mousemove", draw);

            document.getElementById('btnClear').addEventListener('click', function(){
                context.clearRect(0,0,600,600);
            });

            function downOnCanvas(e)
            {
                drawing = true;
                console.log(e);
                context.moveTo(e.offsetX, e.offsetY);
                context.beginPath();
                var color= document.getElementById('color').value;
                var width = document.getElementById('stroke').value;
                context.strokeStyle = color;
                context.lineWidth = width;
            }

            function upOnCanvas(e)
            {
                drawing = false;
                context.closePath();
                console.log("not drawing");
            }

            function draw(e)
            {
               // console.log(e.offsetX + " " + e.offsetY);
                if(drawing)
                {
                    context.lineTo(e.offsetX, e.offsetY);
                    context.stroke();
                }
            }


        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Fingerpaint</title>
	<style>
	h1
	{
	font-family: Arial;
	}
	canvas
	{
	border: 1px solid black;

	}
	label
	{
	font-family: Arial;
	}
	</style>
	</head>
	<body>
	<h1>Fingerpaint</h1>
	<canvas id="myCanvas" width="600px" height="600px"></canvas><br/>
	<label for="color">Color: </label><input type="color" id="color"/><br/>
	<label for="stroke">Stroke Width: </label><input type="range" min="0" max="25" id="stroke"/><br/>
	<button id="btnClear">Clear</button>
	<script>
	var drawing = false;

	var context = document.getElementById('myCanvas').getContext("2d");
	document.getElementById('myCanvas').addEventListener("mousedown", downOnCanvas);
	document.getElementById('myCanvas').addEventListener("mouseup", upOnCanvas);

	document.getElementById('myCanvas').addEventListener("mousemove", draw);

	document.getElementById('btnClear').addEventListener('click', function(){
	context.clearRect(0,0,600,600);
	});

	function downOnCanvas(e)
	{
	drawing = true;
	console.log(e);
	context.moveTo(e.offsetX, e.offsetY);
	context.beginPath();
	var color= document.getElementById('color').value;
	var width = document.getElementById('stroke').value;
	context.strokeStyle = color;
	context.lineWidth = width;
	}

	function upOnCanvas(e)
	{
	drawing = false;
	context.closePath();
	console.log("not drawing");
	}

	function draw(e)
	{
	// console.log(e.offsetX + " " + e.offsetY);
	if(drawing)
	{
	context.lineTo(e.offsetX, e.offsetY);
	context.stroke();
	}
	}


	</script>
	</body>
	</html>