This video tutorial illustrates the drawing of rectangle with styling.
Tutorial Includes:
Drawing rectangle.
Specifying x-axis and y-axis for drawing rectangle.
Specifying width and height for drawing rectangle.
Filling the border(strokeStyle) with color.
Filling the body(fillStyle) of rectangle with color.
Specifying the border width(lineWidth). etc
HTML file
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < !DOCTYPE HTML> <html> <head> <title>Canvas: HTML5</title> <meta charset="utf-8"/> <link href="myStyle.css" rel="stylesheet" /> <script src="myScript.js"></script> </head> <body> <canvas id="myCanvas" width="200" height="200"> Upgrade Browser </canvas> </body> </html> |
Here we’ve attached a stylesheet and a script file.
It also has a canvas element with an id of myCanvas, with 200px width and height.
CSS file
myStyle.css
1 2 3 | canvas {
border: 2px dotted black;
} |
We are assigning a 2px wide black dotted border to the canvas element.
JavaScript file
myScript.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | window.onload = canvas;
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
if( myCanvas && myCanvas.getContext("2d") )
{
var context = myCanvas.getContext("2d");
context.lineWidth = 2;
context.strokeStyle = "red";
context.strokeRect(10, 10, 100, 100);
context.fillStyle = "blue";
context.fillRect(10, 10, 100, 100);
}
} |
Related Read: Canvas Basics: HTML5
Once the index.html file loads, it calls a method called canvas.
Validation
Inside canvas method, we check if the canvas element is actually present on the webpage. If present, we check if the browser actually supports context object.
If both of them are present, then we make use of the API provided by context object and draw the rectangle and assign some styling to it.
Defaults
By default, lineWidth has 1px. In our example we’re setting it to 2px.
By default, strokeStyle and fillStyle has black color. In our example, we’re setting it to red and blue respectively.
Result
Canvas element has some margin by default. And the top left corner of canvas is considered x-axis = 0 and y-axis = 0.
In our example, we are placing our rectangle at 10px x-axis and 10px y-axis, with 100px width and height.
With all these, we get a 100px wide and 100px tall, blue rectangle with a red border.
Draw Rectangle: HTML5 Canvas
[youtube https://www.youtube.com/watch?v=i5aZGbbFwDI]
Now you maybe thinking, we’ll have fillCircle and strokeCircle, fillTriangle and strokeTriangle methods to draw circles and triangles. But NO. We don’t have such methods.
We need to achieve shapes other than rectangle using paths and lines. Lets see how it can be done in our coming video tutorials. Stay subscribed.