HTML and CSS Reference
In-Depth Information
myCanvas_context.stroke();
}
</script>
FiGure 28-5
If you're drawing a continuous line that changes direction, use a series of
lineTo()
functions,
like this:
<script type=”text/javascript”>
function doCanvas() {
var my_canvas = document.getElementById(“myCanvas”);
var myCanvas_context = my_canvas.getContext(“2d”);
myCanvas_context.moveTo(0,225);
myCanvas_context.lineTo(20,200);
myCanvas_context.lineTo(20,150);
myCanvas_context.lineTo(40,180);
myCanvas_context.lineTo(90,150);
myCanvas_context.lineTo(100,165);
myCanvas_context.lineTo(130,90);
myCanvas_context.lineTo(150,100);
myCanvas_context.lineTo(275,50);
myCanvas_context.strokeStyle = “#000”;
myCanvas_context.stroke();
}
</script>
With the chart-like image displayed in Figure 28-6, the
<canvas>
tag uses become a little more
apparent. Though this example uses static x and y coordinates, it would not take much work to
replace them with real-world, dynamically driven data points.
