BASIC <CANVAS> TAG USAGE
As described above, all you may do is give the tag it’s width, height and id with some non-supported browser stuff.
<canvas id="rectangle"> <i>Canvas is not supported in this browser! Please, kindly, switch to a canvas supporting browser for premium experience </i></canvas>
<canvas id="myCanvas"> var canvas = document.getElementById("rectangle"); var context = canvas.getContext("2d"); </canvas>
Once you have the drawing context, you might employ various methods to draw on it. e.g., the strokeRect(x,y,width,height) method takes x and y coordinates and height and width, all specified as numbers representing pixel value. Here’s the code:-
The following code would draw a simple rectangle of 200×300 px starting at the coordinate 20 and 20 from the origin of the canvas. You can also set a particular color for the stroke. You can accomplish this by strokeStyle(), like this:-
context.strokeStyle = "blue"; context.strokeRect(20,20,200,300);
If you want to fill the you can do so by using the fillRect method, like this:-
The parameters for this are (x,y,width,height) value.
By default, the fill color is black. If you wish to change or define the color by using fillColor().Let’s, for the sake of the example, set the color to be blue
context.fillStyle = "rgba(0,0,255,0.3)";
FINAL CODE AND EXAMPLE:-
Don’t want to see all the code.[some of the code has been modified. There were some issues I couldn’t get right] Get all of it right here:-
<!--<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->DOCTYPE html> <html> <body> <h1> Canvas tutorial by <a href="https://webdesignerarsenal.wordpress.com">WDA</a></h1> <canvas id="rectangle"><i>Canvas is not supported in this browser! Please, kindly, switch to a canvas supporting browser for premium experience </i></canvas> <script> var c=document.getElementById('rectangle'); var ctx=c.getContext('2d'); ctx.fillStyle='#0000FF'; ctx.fillRect(0,0,400,200); </script> </body> </html>
So, how did you like the <canvas> tag in HTML 5. Tell us in the comments below.