I am trying to create an HTML page which has two canvas spaces, i. e. two rectangles where objects can be displayed.

In my HTML code I have this line, that represents a rectangle of dimensions 540x600 dp on the left side of the page: <canvas id="canvas" width="540" height="600"></canvas>

But apart from that, I want to generate another canvas space on the right side. Is it possible? How could I do it?

I am trying to create an HTML page which has two canvas spaces, i. e. two rectangles where objects can be displayed.

In my HTML code I have this line, that represents a rectangle of dimensions 540x600 dp on the left side of the page: <canvas id="canvas" width="540" height="600"></canvas>

But apart from that, I want to generate another canvas space on the right side. Is it possible? How could I do it?

• javascript
• css
• html
• canvas

• Wele to StackOverlow! Please make sure that you are aware about the rules. If you find any of the answers good enough, please upvote and accept it. – Rahul Desai Commented Apr 13, 2015 at 9:56

4 Answers 4

You can define as many canvas elements you want in a page. Just give them an unique ID and create a context for each one of them:

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

They will be placed default as inline.

Then in your JavaScript code:

var ctx1 = document.getElementById("canvas1").getContext("2d");
var ctx2 = document.getElementById("canvas2").getContext("2d");

Example

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);

<canvas id="canvas1" width="240" height="300"></canvas>
<canvas id="canvas2" width="240" height="300"></canvas>

Of course you can! Just create another canvas element, plot data in to it and float it to the right through css.

There are no limits on how many canvasses/canvasi/canvi(?) you can draw on a page.

if you have your canvas like this:

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

you can just add another one underneath it:

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

If you want it to pull to the right, add a float:right in css (for example reasons, I did it inline here)

When you go to your javascript, just make sure to specify which canvas you want to draw on:

 var the_first_awesome_canvas = document.getElementById('canvas');
 var the_second_awesome_canvas = document.getElementById('canvas2');

And then specify the context for both:

 var context_for_first = the_first_awesome_canvas.getContext("2d");
 var context_for_second = the_second_awesome_canvas.getContext("2d");

And start drawing:

context_for_first.fillRect(0,0,50,50);
context_for_second.fillRect(0,0,50,50);

<canvas> is displayed inline by default. So you dont have to worry about getting them to display side-by-side. Just give them unique ID's.

Checkout this example below in Full Page mode.

<canvas id="myCanvas1" width="300" height="300" style="background: #0000FF;">
</canvas>

<canvas id="myCanvas2" width="300" height="300" style="background: #FF0000;">
</canvas>