Detection and response ball-to-wall collision inside any polygon
<p>Need to code good method for detection and response ball-to-wall collision inside any polygon.</p>

<p>For example, I have a method which draw a ball which fly inside a rectangle.</p>

<pre><code>ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
</code></pre>

<p>Detect and response that collision very simple.</p>

<pre><code>if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
    dx = -dx;
}

if(y + dy &gt; canvas.height-ballRadius || y + dy &lt; ballRadius) {
    dy = -dy;
}
</code></pre>

<p>But I have a polygon: variable with positions (x and y) of each point.</p>

<pre><code>var polygonPoints = [
{
    x: 240,
    y: 30
},
{
    x: 140,
    y: 100
},
{
    x: 180,
    y: 250
},
{
    x: 320,
    y: 280
},
{
    x: 400,
    y: 50
}
</code></pre>

<p>];</p>

<p>And function wich draw my polygon:</p>

<pre><code>ctx.beginPath();
ctx.strokeStyle = '#333';
ctx.moveTo(polygonPoints[0].x, polygonPoints[0].y);
for (var i = 1, n = polygonPoints.length; i &lt; n; i++) {
    ctx.lineTo(polygonPoints[i].x, polygonPoints[i].y);
}
ctx.lineTo(polygonPoints[0].x, polygonPoints[0].y);
ctx.stroke();
ctx.closePath();
</code></pre>

<p>How I can detect and response collisions inside a polygon?</p>

<p>Demo on <a href="https://jsfiddle.net/u6q7qqLs/2/" rel="nofollow">jsfiddle</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var polygonPoints = [
 {
     x: 240,
        y: 30
    },
    {
     x: 140,
        y: 100
    },
    {
     x: 180,
        y: 250
    },
    {
     x: 320,
        y: 280
    },
    {
     x: 400,
        y: 50
    }
];

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function drawPolygon() {
    ctx.beginPath();
    ctx.strokeStyle = '#333';
    ctx.moveTo(polygonPoints[0].x, polygonPoints[0].y);
 for (var i = 1, n = polygonPoints.length; i &lt; n; i++) {
     ctx.lineTo(polygonPoints[i].x, polygonPoints[i].y);
    }
    ctx.lineTo(polygonPoints[0].x, polygonPoints[0].y);
    ctx.stroke();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPolygon();
    
    if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
        dx = -dx;
    }
    if(y + dy &gt; canvas.height-ballRadius || y + dy &lt; ballRadius) {
        dy = -dy;
    }
    
    x += dx;
    y += dy;
    window.requestAnimationFrame(draw);
}

draw();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
    border: 1px solid #333;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas" width="480" height="320"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>