Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Say Hello to the HTM5 Canvas Element

DZone's Guide to

Say Hello to the HTM5 Canvas Element

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

The 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.
 
 

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of A. Programmer. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}