Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/css">
- #wrapper{
- width: 600px;
- height: 600px;
- margin: auto;
- background: #eee;
- }
- pre{
- background: #ccc;
- text-align: center;
- }
- </style>
- </head>
- <body>
- <h2 style="text-align:center;">Draw A Checker Board On Canvas using JavaScript</h2>
- <div id="wrapper">
- <canvas id="myCanvas" width="600" height="600" style="display:block;position:relative;border:1px solid red;margin:auto;"></canvas>
- </div>
- <script type="text/javascript">
- var canvas = document.getElementById("myCanvas");
- var ctx = canvas.getContext("2d");
- var grd=ctx.createLinearGradient(0,0,100,0);
- grd.addColorStop(0,"red");
- ctx.moveTo(0,0)
- ctx.lineTo(600,600)
- ctx.moveTo(0, 600)
- ctx.lineTo(600,0)
- ctx.moveTo(300,0)
- ctx.lineTo(300,600)
- ctx.moveTo(0,300)
- ctx.lineTo(600,300)
- ctx.moveTo(0,300)
- ctx.lineTo(300,600)
- ctx.moveTo(300,0)
- ctx.lineTo(0,300)
- ctx.moveTo(300,0)
- ctx.lineTo(600,300)
- ctx.moveTo(600,300)
- ctx.lineTo(300,600)
- ctx.moveTo(0,150)
- ctx.lineTo(600,150)
- ctx.moveTo(0,450)
- ctx.lineTo(600,450)
- ctx.moveTo(150,0)
- ctx.lineTo(150,600)
- ctx.moveTo(450,0)
- ctx.lineTo(450,600)
- ctx.strokeStyle = grd
- ctx.stroke()
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement