Tuesday, 19 August 2014

Tagged under: , ,

Can I use the HTML Canvas Element in a Post?

The HTML5 Canvas Element
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'll find a complete list of compatible browsers here.

Canvas is a powerful drawing area. It comes with a set of javascript commands for rendering 2d shapes  and bitmaps. Inclusion and manipulation of texts or images are also possible.

This post is a quick and limited introduction to Canvas.






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:

Your browser does not implement CANVAS.
Sorry!



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.

<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 at the 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:


Your browser does not implement CANVAS.
Sorry!




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:


Your browser does not implement CANVAS.
Sorry!


In future posts, we will show how to insert images to an HTML5 canvas and how to manipulate them.

Stay posted! Happy blogging!

  

1 comment:

  1. nice post bro ...lot of thanks
    http://www.blogonmind.com/

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism