Marketing for Libraries Logo

HTML Section: Canvases

The <canvas> element is new in HTML5. It's used to draw graphics, in real time, on a web page. It's a contain for graphics. A script is used to draw the graphics such as boxes, circles, characters, and images into the area.

You can draw colored, gradient, or multicolored rectangles and text on the canvas.

Create a Canvas

Use the <canvas> element to create a rectangular area on an HTML page.

The basic markup looks like this:

<canvas id="myCanvas" width="200" height="100"></canvas>

You can add a style attribute to define your border and a note for those without browser support like this:

<canvas id="myCanvas" width="300" height="200"
style="border:2px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

Notes: By default, the element has no border or content. You can add a border using the style attribute. The code must specific an id attribute and the width and height of the canvas size. You can have multiple <canvas> elements on a single page. You can also provide a note for those without browser support.

try itTryIt!
Go to w3schools and try editing code that include the <canvas> element.
Try changing the border style and canvas size.

Draw onto the Canvas with JavaScript

To draw on the canvas, JavaScript must be used.

The first line indicates where to find the <canvas> element based on the id.
The second line provides the context.
The third line indicates the properties and methods for drawing. The canvas is a two-dimensional grid with the upper-left corner as (0,0).

Explore the script:

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="blue";
ctx.fillRect(0,0,100,75);
</script>

try itTryIt!
Go to w3schools. You don't need to know much about coding to look for ways the code could be adapted. Try changing the colors and coordinates.

You can draw a path on a canvas using coordinates.

The third, fourth, and fifth line indicate the beginning, ending, and stroke of the line.

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
<script>

You can also draw text on the screen.

The third and fourth lines indicate the font, text, and placement.

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Very Cool",10,50);
<script>

Create gradients. This is a little more complex, but easy to adjust.

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"red");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
<script>

try itTry It!
Go to the w3schools CANVAS page and read the options. Then, use the Try It Yourself buttons to practice with the code.

Inline SVG

HTML5 also has support for inline SVG.

Here is an example that places a star on the page.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

try itTry It!
Go to the w3schools INLINE SVG page and read the options. Then, use the Try It Yourself buttons to practice with the code.

Compatibility

This new feature is supported by Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the <canvas> element. It won't work on IE8 or earlier.


| eduScapes | IUPUI Online Courses | Teacher Tap | 42eXplore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson