Mouse Click Tracking

by wrxsti85

HTML

<canvas id="myCanvas"></canvas>

<div id="statContain">Number:<input id="stat" type="text" value="" /></div>

<p>-</p>

CSS

#myCanvas {
    border: solid 1px #000;
}

JavaScript

// Mouse Tracking and Line Creation
$("#myCanvas").mousedown(function(e) {
    downX = e.pageX;
    downY = e.pageY;
});

$("#myCanvas").mouseup(function(e) {
    upX = e.pageX;
    upY = e.pageY;

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(downX, downY);
    context.lineTo(upX, upY);
    context.strokeStyle = "#000";
    context.stroke();
});

// Draw Grid
var c_canvas = document.getElementById("myCanvas");
var context = c_canvas.getContext("2d");

for (var x = 0.5; x < 500; x += 10) {
    context.moveTo(x, 0);
    context.lineTo(x, 375);
}

for (var y = 0.5; y < 375; y += 10) {
    context.moveTo(0, y);
    context.lineTo(500, y);
}

context.strokeStyle = "#eee";
context.stroke();

loop();

// Random Number Generation

var startCount = 0;
var endCount = 10;
var lastNumber = 150;

function loop(){
    var randomnumber=Math.floor(Math.random()*16);
    $('#stat').val(randomnumber);
    
    n15 = 0;
    n14 = 10;
    n13 = 20;
    n12 = 30;
    n11 = 40;
    n10 = 50;
    n9 = 60;
    n8 = 70;
    n7 = 80;
    n6 = 90;
    n5 = 100; 
    n4 = 110;
    n3 = 120;
    n2 = 130;
    n1 = 140;
    n0 = 150;
    
    if(randomnumber == 0){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
    
        context.beginPath();
        context.moveTo(startCount, lastNumber);
        context.lineTo(endCount, n0);
        context.strokeStyle = "#000";
        context.stroke();  
        startCount = startCount + 10;
        endCount = endCount + 10;
        lastNumber = 150;
    }
    
    if(randomnumber == 1){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
    
        context.beginPath();
        context.moveTo(startCount, lastNumber);
        context.lineTo(endCount, n1);
        context.strokeStyle = "#000";
        context.stroke();  
        startCount =...