Click anywhere in the canvas to set the knob indicator

by techsin

HTML

<br/>
<p>Click anywhere in the canvas to set the knob indicator</p>
<br/>
<canvas id="canvas" width=200 height=200></canvas>

CSS

body {
            background-color: ivory;
        }
        canvas {
            border:1px solid red;
        }

JavaScript

var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var canvasOffset = $("#canvas").offset();
        var offsetX = canvasOffset.left;
        var offsetY = canvasOffset.top;
        var circleArc = Math.PI * 2;

        // drawing design properties
        var knobCenterX = 100;
        var knobCenterY = 100;
        var knobRadius = 50;
        var knobColor = "green";
        var indicatorRadius = 5;
        var indicatorColor = "yellow";

        Draw(canvas.width / 2, 1); // just to get started

        function Draw(mouseX, mouseY) {
            // given mousePosition, what is the nearest point on the knob
            var rads = Math.atan2(mouseY - knobCenterY, mouseX - knobCenterX);
            var indicatorX = knobRadius * Math.cos(rads) + knobCenterX;
            var indicatorY = knobRadius * Math.sin(rads) + knobCenterY;
            // start drawing
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // draw knob
            ctx.beginPath();
            ctx.arc(knobCenterX, knobCenterY, knobRadius, 0, circleArc, false);
            ctx.fillStyle = "ivory";
            ctx.fill();
            ctx.lineWidth = 2;
            ctx.strokeStyle = knobColor;
            ctx.stroke();
            // draw indicator
            ctx.beginPath();
            ctx.arc(indicatorX, indicatorY, indicatorRadius, 0, circleArc, false);
            ctx.fillStyle = indicatorColor;
            ctx.fill();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }

        function handleMouseDown(e) {
            MouseX = parseInt(e.clientX - offsetX);
            MouseY = parseInt(e.clientY - offsetY);
            Draw(MouseX, MouseY);
        }

        $("#canvas").mousedown(function (e) {
            handleMouseDown(e);
        });