geotheory geotheory - 5 months ago 38
CSS Question

Remove HTML canvas border

I'm customising my homepage 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

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">
<meta charset="utf-8" />

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

Grateful for assistance.


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)