HTML Canvas - How to have multiple Canvas Layers Overlapping Without Association?
<p>I'm trying to make 2 separate canvas elements that overlap one another without them interfering.</p>

<p>Here is my code:</p>

<p>HTML</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="format-detection" content="telephone=no" /&gt;
    &lt;meta name="msapplication-tap-highlight" content="no" /&gt;
    &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/index.css" /&gt;
    &lt;title&gt;Dodge 'n Block&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;canvas id="myCanvas1"&gt;
        Your browser does not support the HTML5 canvas tag.
    &lt;/canvas&gt;
    &lt;canvas id="myCanvas2"&gt;
        Your browser does not support the HTML5 canvas tag.
    &lt;/canvas&gt;

    &lt;script type="text/javascript" src="cordova.js"&gt;   &lt;/script&gt;
    &lt;script type="text/javascript" src="js/index.js"&gt;  &lt;/script&gt;

&lt;/body&gt;
</code></pre>

<p></p>

<p>Javascript</p>

<pre><code>var c1 = document.getElementById("myCanvas1");
var ctx1 = c1.getContext("2d");

var c2 = document.getElementById("myCanvas2");
var ctx2 = c2.getContext("2d");
</code></pre>

<p>Now when I try to do <code>ctx2.clearRect(0, 0, c2.width, c2.height);</code> it clears the whole canvas, including canvas c1, ctx1.</p>

<p>Is there a way I can do this?</p>

<p>Feel free to ask any questions, thank you!</p>