I am trying to place two canvas nearby. But unfortunately when i include two canvas it automatically produces a space between two canvas. How to remove that empty space or how to join that two canvas. Here is my fiddle Fiddle

here is my code:

<canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"></canvas> 
<canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"></canvas> 
​

here is the script:

window.onload=function()
{
var canvas = document.getElementById("button");
var ctx = canvas.getContext('2d');
}​

I am trying to place two canvas nearby. But unfortunately when i include two canvas it automatically produces a space between two canvas. How to remove that empty space or how to join that two canvas. Here is my fiddle Fiddle

here is my code:

<canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"></canvas> 
<canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"></canvas> 
​

here is the script:

window.onload=function()
{
var canvas = document.getElementById("button");
var ctx = canvas.getContext('2d');
}​

• javascript
• html
• canvas
• html5-canvas

Share Improve this question Follow asked Dec 19, 2012 at 3:55 Praveen SinghPraveen Singh 54222 gold badges1010 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

The newline in the HTML is being treated as a space. Simply get rid of the whitespace between the two canvases:

<canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;">
</canvas><canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;">
</canvas>

See fiddle.

Or use:

<canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"></canvas><!--
--><canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"></canvas>