Say Hello to the HTM5 Canvas Element
Join the DZone community and get the full member experience.
Join For FreeThe HTML5 <canvas> element is the container for graphics, the place where you can draw graphics using a script. Since JavaScript seems to be the most used scripting language, in this example, we used JavaScript to draw some text inside a gradient rectangle.
<!DOCTYPE html> <html> <body> <canvas width="800" height="600" id="canvas">Your browser does not support the canvas tag.</canvas> <script> var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); var gradient = c.createLinearGradient(0,0,200,200); gradient.addColorStop(0, "#F0E68C"); gradient.addColorStop(1, "crimson"); c.fillStyle = gradient; c.fillRect(0,0,550,300); c.fillStyle = "#fff"; c.font = "italic 30pt Arial"; c.shadowColor = "#000"; c.shadowOffsetX = 0; c.shadowOffsetY = 0; c.shadowBlur = 20; c.fillText("This is a canvas example !", 50,150); </script> </body> </html>
And the output will be:
The <canvas>
tag is supported in Internet Explorer 9 (earlier versions does not
support the <canvas> element), Firefox, Opera, Chrome and
Safari.
Element
Published at DZone with permission of A. Programmer. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments