Cut And Paste Code For Lesson 4


Draw A Circle Code:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>


Add A Loop To The Circle Code For Fun!

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

 

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();

var radious;
for(radious=10; radious>=0; radious= radious-1){
ctx.arc(95,50,radious,0,2*Math.PI);
}


ctx.stroke();
</script>
</body>
</html> 


Swap Images When a Key is Pressed:

<!DOCTYPE html>
<html>
<body>

<img id="myImage" onclick="changeImage()" src="http://www.noonco.com/rc/grumpy_01.jpg" width="600" height="450">

<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("grumpy_02")) {
        image.src = "http://www.noonco.com/rc/grumpy_01.jpg";
    } else {
        image.src = "http://www.noonco.com/rc/grumpy_02.jpg";
    }
}
</script>
</body>
</html>