geotheory geotheory - 1 month ago 9
CSS Question

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.

Answer

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)

Comments