Canvas - HTML5 with Visual Studio 2012 - page 236

2. Add a new script element in the body element just after the existing script

element using the code shown in Listing 10-7.

Listing 10-7. Initial solar system implementation
<script id = "solar system" type = "text/javascript">

var ss = document.getElementById('solarSystem')
var ssContext = ss.getContext('2d');

setInterval(animateSS, 100);

function animateSS() {
var ss = document.getElementById('solarSystem')
var ssContext = ss.getContext('2d');

// Clear the canvas and draw the background
ssContext.clearRect(0, 0, 450, 400);
ssContext.fillStyle = "#2F1D92";
ssContext.fillRect(0, 0, 450, 400);

ssContext.save();

// Draw the sun
ssContext.translate(220, 200);
ssContext.fillStyle = "yellow";
ssContext.beginPath();
ssContext.arc(0, 0, 15, 0, Math.PI * 2, true);
ssContext.fill();

// Draw the earth orbit
ssContext.strokeStyle = "black";
ssContext.beginPath();
ssContext.arc(0, 0, 150, 0, Math.PI * 2);
ssContext.stroke();

ssContext.restore()
}
</script>

Ti ■ In visual studio, you can collapse an HTML element in the editor. since you're done with the previous script
element you can collapse it, which will make it easier to see the new element that you'll be working on. While you
don't need to set the id attribute of a script element, if you do, it will be displayed when the element is collapsed as
demonstrated in Figure 10-9 . This will make it easier to view pages with multiple script elements.