Distance Formula, Points within Circle

by mmansion

HTML

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

CSS

body {
    margin: 0;
}
canvas {
    width: 100%;
    height: 100%;
    background: black;
}

JavaScript

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

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

var centerX = canvas.width/2;
var centerY = canvas.height/2;

var cirCenter = { x: centerX, y: centerY },
    cirRadius = 100;
      


ctx.beginPath();
ctx.arc(centerX, centerY, cirRadius, 0, Math.PI*2, false);
ctx.strokeStyle = '#fff';
ctx.stroke();


canvas.addEventListener('click', function(e) {
    console.log(e.clientX + ' : ' + e.clientY); 
    ctx.beginPath();
    ctx.arc(e.clientX, e.clientY, 10, 0, Math.PI*2, false);
    if(insideCircle(e.clientX, e.clientY)) {
        ctx.fillStyle = 'red';
    } else {
        ctx.fillStyle = 'white';
    }
    ctx.fill();  
}, false);


function insideCircle(ptX, ptY) {
    var dist = Math.sqrt(
        Math.pow((ptX - cirCenter.x), 2) + 
        Math.pow((ptY - cirCenter.y), 2)
    );
    console.log(dist);
    return dist < cirRadius;
}