<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>html test tool-www.zhaokeli.com</title> <meta name="keywords" content="keywords" /> <meta name="description" content="description" /> <style> *{margin:0px;padding:0px;font:12px/1.7 'microsoft yahei';} .container{} </style> </head> <body> <div class="container"> here is code... <canvas id="huabu"></canvas> <script> var canvas=document.getElementById('huabu'); canvas.width=400; canvas.height=400; var cxt=canvas.getContext('2d'); cxt.fillStyle='#ededed'; cxt.fillRect(0,0,canvas.width,canvas.height); </script> </div> </body> </html>