DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Say Hello to the HTM5 Canvas Element

Say Hello to the HTM5 Canvas Element

A. Programmer user avatar by
A. Programmer
·
Jun. 15, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
5.99K Views

Join the DZone community and get the full member experience.

Join For Free

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

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

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Applying Kappa Architecture to Make Data Available Where It Matters
  • 11 Best Practices to Do Functional Testing on the Cloud
  • How to Design a CRUD Web Service for Inheritable Entity
  • The Engineer’s Guide to Creating a Technical Debt Proposal

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo