cajigger

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Strikk</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;"></canvas>

<script type="text/javascript">
    /*=========================================================
    ==================== DOM ELEMENTS AND GLOBAL VARIABLES ============
    =========================================================*/
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    //var mouseState = 0;
    var isGrabbed = false;

    /*=========================================================
    ==================== DRAWING =========================
    =========================================================*/

    draw();

    /*=========================================================
    ==================== EVENT LISTENERS =========================
    =========================================================*/

    //Mousedown
    cvs.addEventListener("mousedown", function(e) {
        //Set mouse state
        //mouseState = EMouseState.down;

        //Get coordinates on canvas
        var currX = e.clientX - cvs.offsetLeft;
        var currY = e.clientY - cvs.offsetTop;

        //Check if near central circle
        var d = Math.sqrt((currX-300)*(currX-300) + (currY-300)*(currY-300));
        if(d<=4){
            isGrabbed = true;
        }
    });

    //Mouseup
    cvs.addEventListener("mouseup", function(e){
       isGrabbed = false;
       //mouseState = EMouseState.up;
       draw();
    });

    //Mousemove
    cvs.addEventListener("mousemove", function(e) {
        //Get coordinates on canvas
        var currX = e.clientX - cvs.offsetLeft;
        var currY = e.clientY - cvs.offsetTop;

        //Check if near central circle
        var d = Math.sqrt((currX-300)*(currX-300) + (currY-300)*(currY-300));
        if(d<=4){
            cvs.style.cursor = "pointer";
        } else {
            cvs.style.cursor = "auto";
        }

        if(isGrabbed ){
            //Call draw function
            draw(currX,currY);
        }

    });

    /*=========================================================
    ==================== FUNCTIONS AND OBJECTS ================
    =========================================================*/
    EMouseState = {
        up: 0,
        down: 1
    };

    function draw(){
        //Clear canvas
        ctx.clearRect(0,0,cvs.width, cvs.height);
        //Background
        ctx.fillStyle = "yellow";
        ctx.fillRect(0,0,cvs.width, cvs.height);

        //Center square
        ctx.fillStyle = "red";
        ctx.fillRect(150,150,300,300);

        if(arguments.length === 0){
            //Lines to center
            ctx.beginPath();
            ctx.moveTo(150,300);
            ctx.lineTo(300,300);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(450,300);
            ctx.lineTo(300,300);
            ctx.stroke();

            //Center circle
            ctx.beginPath();
            ctx.arc(300,300,4,0,2*Math.PI);
            ctx.stroke();
        } else if (arguments.length === 2){
            ctx.beginPath();
            ctx.moveTo(150,300);
            ctx.lineTo(arguments[0],arguments[1]);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(450,300);
            ctx.lineTo(arguments[0],arguments[1]);
            ctx.stroke();

            //Center circle
            ctx.beginPath();
            ctx.arc(arguments[0],arguments[1],4,0,2*Math.PI);
            ctx.stroke();
        }

    }


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