Canvas is an HTML 5 element that can be used to draw on the fly in a web page. About 90% of browsers in use, today, implement Canvas. You...
Can I Use The HTML Canvas Element In A Post
First things first: Canvas is an HTML tag with width, height style and id properties. To include a canvas based drawing area in your post proceed as follows:
- Switch to html view
- Enter the following HTML code where you want to place you drawing area:
<canvas id="mydrawing" width="400" height="200" style="background: #98FB98; margin-left:200px;">
Your browser does not implement CANVAS.
<br />
Sorry!
</canvas>Here is the result:
As you can see Canvas is a simple HTML tag. If the background (PaleGreen: #98FB98) or the size of the drawing (400 pixels * 200 pixels) does not match your needs or your taste, you can edit it. The text (Your browser ...) that is placed between opening and closing tags will only be displayed if the browser does not implement Canvas and therefore cannot display the drawing. Note that it is recommended not to use the width and height CSS properties within the style to avoid stretching or deformation. Just give the width and the height (in pixels) outside the style the same way I did in the example.
How Do I Draw A Line In My Canvas
The following commands will draw a red line between upper left and bottom right corners. They can be placed just after the canvas closing tag in the html code.
The javascript code starts with the creation of a context variable:
...
}
This code is standard, you just have to replace the name of your canvas (in the example 'mydrawing') by your actual canvas name. Let's have a look to drawing commands
<script>
var mycanvas = document.getElementById('mydrawing') ;
if( mycanvas.getContext ) {
var ctx = mycanvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(399, 399);
ctx.lineWidth = 1 ;
ctx.strokeStyle = 'Red' ;
ctx.stroke();
}
</script>The javascript code starts with the creation of a context variable:
var mycanvas = document.getElementById('mydrawing') ;
if( mycanvas.getContext ) {
var ctx = mycanvas.getContext('2d');......
}
This code is standard, you just have to replace the name of your canvas (in the example 'mydrawing') by your actual canvas name. Let's have a look to drawing commands
ctx.beginPath()
Starts the recording of a new shape (a 'path')
ctx.moveTo(0, 0);
Positions the cursor at the point defined by x=0 and y=0
ctx.lineTo(399, 399);
Draw a line from the current location (0.0 in the example) to a new location defined by x=399px / y=399px
ctx.lineWidth = 1 ;
Defines line width (1px)
ctx.strokeStyle = 'Red' ;
Defines line color (red)
ctx.stroke();
Executes the batch of drawing commands and draws the line
Here the result:
How Do I Write In My Canvas
You can add text to a canvas. Let's do that. Following is a set of instruction that will add text to our green Canvas:
<script>
var mycanvas = document.getElementById('mydrawing') ;
var ctx = mycanvas.getContext('2d');
// first text
ctx.font = '46px Comic Sans MS' ;
ctx.lineWidth = 3 ;
ctx.strokeStyle = "green";
ctx.strokeText("ProBloggerTricks",15,100);
// second text
ctx.font = '20px Verdana' ;
ctx.lineWidth = 4 ;
ctx.fillStyle = "red";
ctx.fillText("Blog and make money on linе",50,130) ;
</script> A few comments on these commands:
ctx.font
Font to use and size
ctx.lineWidth
Line width
ctx.strokeStyle
Color of strike (outline)
ctx.strokeText
Draw the text (with no fill). This instruction takes 3 parameters: the text, the x-coordinate, the y-coordinate.
ctx.fillStyle
Color of fill
ctx.fillText
Draw the text (the fill only). This instruction takes 3 parameters: the text, the x-coordinate, the y-coordinate.
Note that, if you want to draw a text with a stroke color that is different from the fill color, you will have to use fillStyle, fillText, strokeStyle and strokeText. In this case, it is good practice to place the fillText command before the strokeText command.
Here is our text:
In future posts, we will show how to insert images to an HTML5 canvas and how to manipulate them.
Stay posted! Happy blogging!
