javascript - Can I create two canvas spaces in a unique html page? -

javascript - Can I create two canvas spaces in a unique html page? -

i trying create html page has 2 canvas spaces, i. e. 2 rectangles objects can displayed.

in html code have line, represents rectangle of dimensions 540x600 dp on left side of page: <canvas id="canvas" width="540" height="600"></canvas>

but apart that, want generate canvas space on right side. possible? how it?

you can define many canvas elements want in page. give them unique id , create context each 1 of them:

<canvas id="canvas1" width="540" height="600"></canvas> <canvas id="canvas2" width="540" height="600"></canvas>

they placed default inline.

then in javascript code:

var ctx1 = document.getelementbyid("canvas1").getcontext("2d"); var ctx2 = document.getelementbyid("canvas2").getcontext("2d"); example

class="snippet-code-js lang-js prettyprint-override">var ctx1 = document.getelementbyid("canvas1").getcontext("2d"); var ctx2 = document.getelementbyid("canvas2").getcontext("2d"); ctx1.filltext("canvas 1", 10, 10); ctx2.filltext("canvas 2", 10, 10); class="snippet-code-html lang-html prettyprint-override"><canvas id="canvas1" width="240" height="300"></canvas> <canvas id="canvas2" width="240" height="300"></canvas>

javascript html css html5 canvas