HTML and CSS Reference
In-Depth Information
<html>
<head>
<title>Basic Canvas Drawing</title>
<script>
function draw(){
var canvas = document.getElementById
('myCanvas');
if (canvas.getContext){
var myShape = canvas.getContext('2d');
myShape.beginPath();
myShape.moveTo(750,500);
myShape.lineTo(1000,750);
myShape.lineTo(1000,250);
myShape.fill();
}
}
</script>
</head>
<body onload=”draw();”>
<canvas id=”myCanvas” width=”1500”
height=”1500”></canvas>
</body>
</html>
The lineTo method describes the shape. There are four tools
you can use to describe your shape:
• Lines
• Arcs
• Beziercurves
• Quadraticcurves
These four shape drawing tools allow you to create any type of
shape.
Drawing Lines
The most simple path to describe is the line. Using the lineTo
method you describe the starting and ending X and Y axes
positions. For instance, the following code describes a basic
rectangle.
myTriangle.beginPath();
myTriangle.moveTo(10, 10);
myTriangle.lineTo(500, 10);
myTriangle.lineTo(10, 500);
myTriangle.lineTo(10, 10);
The lineTo property describes the three lines used to create
position:
