You can use the canvas element to create a drawing area (the "canvas"). After you create a canvas, you can draw graphics inside the canvas using JavaScript.
You can write scripts to draw graphics inside a canvas element, but you should use an application to draw anything more than basic shapes. For example, you can use Flash CS5 to create complex and animated graphics for a canvas element using JavaScript.
See www.canvasdemos.com for examples and development tools. For a full tutorial on using all of the canvas element's methods, see developer.mozilla.org/en/Canvas_tutorial.
The following table explains the functions that can be used to draw basic shapes.
Shape | Functions | Description |
---|---|---|
arcs |
arc(x, y, radius, startAngle, endAngle, anticlockwise) |
startAngle – the start point of the arc (in radians)
You can use the following expression to convert degrees to radians: |
curves – Bézier |
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) |
cp1x – the x coordinate of the first control point |
curves - quadratic |
quadraticCurveTo(cp1x, cp1y, x, y) |
cp1x – the x coordinate of the first control point |
lines / paths |
beginPath() |
Starts a new shape |
rectangles |
fillRect(x,y,width,height); |
Draws a filled rectangle |
rectangles |
rect(x, y, width, height) |
x and y – the top left corner's location |
<body onload="draw();">
<script>
function draw() {
var canvas = document.getElementById('myShape');
if (canvas.getContext) {
var drw = canvas.getContext('2d');
"rgb(0,100,0)";
drw.fillRect(10,10,100,50);
} }
</script>
<canvas id="myShape" width="300" height="300">A green rectangle</canvas>