<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; } div{ position: absolute; width: 400px; height: 150px; border: 5px solid #FFF; top: 35%; left: 35%; } div h1{ color: #fff; line-height: 150px; text-align: center; font-size: 50px; } </style> </head> <body> <div> <h1>Dot.js</h1> </div> <canvas id="dot" style="background:linear-gradient(to bottom, #B80D57, #C9182B);"> <p>your browser not support canvas</p> </canvas> </table> <script src="js/dot.js"></script> <script src="js/demo.js"></script> </body> </html>