The code below shows how to use the HTML5 canvas and JavaScript in a webpage to draw objects. In this example, the object will be a simple rectangle shape inside a canvas with a grey border. The rectangle will be filled with red and have a blue border. It will look like this:
You can use the canvas for drawings, animations, and even games. Watch the video below to see how to create a canvas and draw a rectangle shape, then scroll down to see the code.
Check out the sample code below. You can view all the different HTML colour codes that you can use here.
<!DOCTYPE html> <html> <head> <title>Simple canvas with rectangle drawing</title> <style> #myCanvas{ background-color: white; border: 1px solid black; } </style> <script> function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.fillStyle = "red"; ctx.strokeStyle = "blue"; ctx.fillRect(0,0,150,75); ctx.strokeRect(0,0,150,75); } window.onload=draw; </script> </head> <body> <canvas id="myCanvas" width="200" height="100"> </body> </html> |
Next tutorial: Drawing lines using the HTML5 canvas element