CANVAS grafika
When you use a canvas element in your web page, it creates a rectangular area on the page. By
default, this rectangular area is 300 pixels wide and 150 pixels high, but you can specify the exact
size and set other attributes for your canvas element.
As with most HTML elements, CSS can be applied to the
canvas element itself to add borders, padding, margins, etc.
<canvas id="diagonal" style="border: 1px
solid;" width="200" height="200">
</canvas>
You then use the context to perform drawing operations. In this case, you can create the diagonal
line by calling three methods—beginPath, moveTo, and lineTo—passing in the line’s start and end
coordinates. The drawing methods moveTo and lineTo do not actually create the line; you finalize
a canvas operation and draw the line by calling the context.stroke();
var canvas = document.getElementById('trails');
var context = canvas.getContext('2d');
context.save();
context.translate(130, 250);
// Create the shape for our canopy path
createCanopyPath(context);
// Stroke the current path
context.stroke();
context.restore();
// Set the fill color to green and fill the
canopy
context.fillStyle = '#339900';
context.fill();
// Change fill color to brown
context.fillStyle = '#663300';
// Fill a rectangle for the tree trunk
context.fillRect(-5, -50, 10, 50);
Drawing a Curve
// Save the canvas state and draw the path
context.save();
context.translate(-10, 350);
context.beginPath();
// The first curve bends up and right
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190);
// The second curve continues down and right
context.quadraticCurveTo(310, -250, 410,-250);
// Draw the path in a wide brown stroke
context.strokeStyle = '#663300';
context.lineWidth = 20;
context.stroke();
// Restore the previous canvas state
context.restore();