HTML Canvas Tutorial

---

var c=document.getElementById("myCanvas");
var canvOK=1;
try {c.getContext("2d");}
catch (er) {canvOK=0;}
if (canvOK==1)
{
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,100,50);

var grd=ctx.createLinearGradient(140,20,240,70);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(140,20,100,50);

var grd2=ctx.createLinearGradient(20,90,120,90);
grd2.addColorStop(0,"black");
grd2.addColorStop("0.3","magenta");
grd2.addColorStop("0.5","blue");
grd2.addColorStop("0.6","green");
grd2.addColorStop("0.8","yellow");
grd2.addColorStop(1,"red");
ctx.fillStyle=grd2;
ctx.fillRect(20,90,100,50);

ctx.font="30px Verdana";
var grd3=ctx.createLinearGradient(140,20,240,90);
grd3.addColorStop(0,"black");
grd3.addColorStop("0.3","magenta");
grd3.addColorStop("0.6","blue");
grd3.addColorStop("0.8","green");
grd3.addColorStop(1,"red");
ctx.strokeStyle=grd3;
ctx.strokeText("Smile!",140,120); }

---

What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

---

Browser Support

The numbers in the table specify the first browser version that fully supports the
<canvas> element.

Element
<canvas>	4.0	9.0	2.0	3.1	9.0

---

HTML Canvas Can Draw Text

Canvas can draw colorful text, with or without animation.

---

HTML Canvas Can Draw Graphics

Canvas has great features for graphical data presentation with an imagery of
graphs and charts.

---

---

HTML Canvas Can be Animated

Canvas objects can move. Everything is possible: from simple bouncing balls
to complex animations.

---

HTML Canvas Can be Interactive

Canvas can respond to
JavaScript events.

Canvas can respond to any user action (key clicks, mouse
clicks, button clicks, finger movement).

---

HTML Canvas Can be Used in Games

Canvas' methods for animations, offer a lot of possibilities for HTML gaming
applications.

---

Canvas Example

In HTML, a <canvas> element looks like this:

The <canvas> element must have an id attribute so it can be referred to by JavaScript.

The width and height attribute is necessary to define the size of the canvas.

Tip: You can have multiple <canvas> elements on one HTML page.

To add a border, use a style attribute:

The next chapters show how to draw on the canvas.