'Get rid of padding/margin around <canvas> element?

I have a canvas object in a div. The canvas seems to have a padding around it somehow. I want its edges to touch the edges of the browser screen:

// my html file:
<body>
  <div id="canvasholder"></div>
</body>

// my java gwt code
Canvas canvas = Canvas.createIfSupported(); 
canvas.setWidth("100%");
canvas.setHeight("100%");
RootPanel.get("canvasholder").add(canvas);

but yeah the page still has a ~20px margin around the canvas element. There is nothing else on the page beside what's copied above.

I don't think this is a GWT specific problem, might be that html elements have default padding/margin to them?

Thanks

------ Update ------------

I'm weirdly still seeing the padding, the firebug plugin is showing me that the body element has a 10px margin somehow:

// firebug inspection of the body element:
body {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 none;
    color: black;
    direction: ltr;
    margin: 10px; // huh?
    padding: 0;
}

// my css file:
hml, body, div, canvas {
    margin: 0px;
    padding: 0px;
}
div.logParent {
    position: absolute;
    top: 20px; left: 20px;
    color: black;
    z-index: 2;
}
htmlgwtcanvas


Solution 1:[1]

I had similar problem, the absolutely positioned div with canvas inside (added via JS so no extra spaces around) was causing overflow on page when I positioned div at the bottom of the page.

The solution was to set canvas display property to 'block' (didn't know it's 'inline-block' by default at the time) and now no extra padding is added and scrollbars are gone.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Loïc

Related Questions