The canvas element is the actual DOM node that’s embedded in the HTML page, The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // do cool things with the context context.font = '45pt cursive'; context.fillStyle = 'red'; context.fillText('Hello World!', 11, 60); </script> </body> </html> |
Result
Property
context.fillStyle=”#FF0000″;
context.fillRect(20,20,150,100);
context.strokeStyle=”#FF0000″;
context.lineWidth=5;
context.strokeRect(20,20,150,100);
context.shadowBlur=20;
context.shadowColor=”black”;
context.shadowBlur=10;
context.shadowOffsetX=20;
context.shadowColor=”black”;
context.shadowBlur=10;
context.shadowOffsetY=20;
context.shadowColor=”black”;
var grd=context.createLinearGradient(0,0,170,0);
grd.addColorStop(0,”black”);
grd.addColorStop(1,”white”);
var grd=context.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,”red”);
grd.addColorStop(1,”white”);
More Stories
Amazing html canvas examples
html5 capture image from camera
Canvas Lines