CODEWITHSUNDEEP
htmlcss
geotheory
geotheory

Reputation: 23660

Remove HTML canvas border

I'm customising my homepage http://geotheory.co.uk/ with an interactive animation, but having trouble making it feel more seemeless in the page. I want to remove the animated canvas object's border as this creates unnecessary scroll bars. I've tried various style options such as border and padding but without any luck. The animation is a Processing script that is then translated to javascript. The index.html reads:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>geotheory.co.uk</title>
    <style>
        canvas:focus{outline:none;}
    </style>

</head>
<body  id="home" bgcolor="blue">
    <script src="processing-1.4.1.min.js"></script>
    <div id="canvasContainer">
    <canvas data-processing-sources="rectangles.pde"></canvas>
    </div>
</body>

Grateful for assistance.

Upvotes: 3

Views: 17023

Answers (2)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

Add margin: 0; to the body tag in your css, and display: block; to the canvas tag in your css.

Example:

canvas {
    display:block;
}

body {
    margin:0;
}

Upvotes: 8

Mr. Alien
Mr. Alien

Reputation: 157344

I guess you've not resetted the browser default styles...So you need to reset the default styles.. Use this

* {
   margin: 0;
   padding: 0;
}

Explanation : Browser gives padding, margins to some elements, so inorder to reset them you need to use the style which I told you else you can also use CSS reset

And also use display: block; for <canvas> (As Kolink Said)

Upvotes: 8

Related Questions