HTML and CSS Reference
In-Depth Information
Try iT
In this Try It you learn how to create a simple chart with the
<canvas>
tag.
Lesson requirements
You will need the
tpa_chart.html
file from the Lesson_28 folder, as well as a text editor and a web
browser.
step-by-step
1.
Open your text editor.
2.
From the Lesson_28 folder, open
tpa_chart.html
.
3.
Place your cursor before the closing angle bracket in the
<body>
tag, press Space, and then
enter this code:
onLoad=”doCanvas();”
4.
Place your cursor before the code
</div> <!-- End mainContent-->
and press Enter
(Return).
5.
Enter this code:
<canvas id=”myCanvas” width=”550” height=”300”></canvas>
6.
Place your cursor after the closing
</style>
tag and press Enter (Return).
7.
Enter the following code:
<script type=”text/javascript”>
function doCanvas() {
var my_canvas = document.getElementById(“myCanvas”);
var myCanvas_context = my_canvas.getContext(“2d”);
myCanvas_context.font = “bold 18px sans-serif”;
// Moon
myCanvas_context.fillStyle=”#F00”;
myCanvas_context.fillRect(60, 110, 90, 300);
myCanvas_context.fillStyle=”#000”;
myCanvas_context.fillText(“Moon”, 80, 100);
// Jupiter
myCanvas_context.fillStyle=”#0F0”;
myCanvas_context.fillRect(180, 240, 90, 300);
myCanvas_context.fillStyle=”#000”;
myCanvas_context.fillText(“Jupiter”, 195, 230);
// Mars
myCanvas_context.fillStyle=”#00F”;
myCanvas_context.fillRect(300, 50, 90, 300);
myCanvas_context.fillStyle=”#000”;
myCanvas_context.fillText(“Mars”, 325, 40);
// Saturn
myCanvas_context.fillStyle=”#F0F”;
myCanvas_context.fillRect(420, 150, 90, 300);
