<!DOCTYPE html>

<html>

<head>

 <title>CANVAS USING JAVASCRIPT</title>

 <script>

function draw()

{

 var canvas=document.getElementById("canvas");

 var ctx=canvas.getContext("2d");

 ctx.fillStyle="rgb(0,0,0)";

 ctx.fillRect(0,0,50,50);

 ctx.fillRect(100,0,50,50);

 ctx.fillRect(200,0,50,50);

 ctx.fillRect(300,0,50,50);

 ctx.fillRect(400,0,50,50);

 ctx.fillRect(500,0,50,50);

 ctx.fillRect(600,0,50,50);

 ctx.fillRect(700,0,50,50);

    ctx.fillRect(50,50,50,50);

    ctx.fillRect(150,50,50,50);

    ctx.fillRect(250,50,50,50);

    ctx.fillRect(350,50,50,50);

    ctx.fillRect(450,50,50,50);

    ctx.fillRect(550,50,50,50);

    ctx.fillRect(650,50,50,50);

    ctx.fillRect(0,100,50,50);

    ctx.fillRect(100,100,50,50);

    ctx.fillRect(200,100,50,50);

    ctx.fillRect(300,100,50,50);

    ctx.fillRect(400,100,50,50);

    ctx.fillRect(500,100,50,50);

    ctx.fillRect(600,100,50,50);

    ctx.fillRect(700,100,50,50);

    ctx.fillRect(50,150,50,50);

    ctx.fillRect(150,150,50,50);

    ctx.fillRect(250,150,50,50);

    ctx.fillRect(350,150,50,50);

    ctx.fillRect(450,150,50,50);

    ctx.fillRect(550,150,50,50);

    ctx.fillRect(650,150,50,50);

    ctx.fillRect(0,200,50,50);

    ctx.fillRect(100,200,50,50);

    ctx.fillRect(200,200,50,50);

    ctx.fillRect(300,200,50,50);

    ctx.fillRect(400,200,50,50);

    ctx.fillRect(500,200,50,50);

    ctx.fillRect(600,200,50,50);

    ctx.fillRect(700,200,50,50);

    ctx.fillRect(50,250,50,50);

    ctx.fillRect(150,250,50,50);

    ctx.fillRect(250,250,50,50);

    ctx.fillRect(350,250,50,50);

    ctx.fillRect(450,250,50,50);

    ctx.fillRect(550,250,50,50);

    ctx.fillRect(650,250,50,50);

    ctx.fillRect(0,300,50,50);

    ctx.fillRect(100,300,50,50);

    ctx.fillRect(200,300,50,50);

    ctx.fillRect(300,300,50,50);

    ctx.fillRect(400,300,50,50);

    ctx.fillRect(500,300,50,50);

    ctx.fillRect(600,300,50,50);

    ctx.fillRect(700,300,50,50);

    ctx.fillRect(50,350,50,50);

    ctx.fillRect(150,350,50,50);

    ctx.fillRect(250,350,50,50);

    ctx.fillRect(350,350,50,50);

    ctx.fillRect(450,350,50,50);

    ctx.fillRect(550,350,50,50);

    ctx.fillRect(650,350,50,50);

    ctx.fillRect(0,400,50,50);

    ctx.fillRect(100,400,50,50);

    ctx.fillRect(200,400,50,50);

    ctx.fillRect(300,400,50,50);

    ctx.fillRect(400,400,50,50);

    ctx.fillRect(500,400,50,50);

    ctx.fillRect(600,400,50,50);

    ctx.fillRect(700,400,50,50);

}

    </script>

   </head>

<body onload="draw()">

<canvas id="canvas" width="1000" height="1000"></canvas>

</body>

</html>