Canvas

1. Basic Shapes

Copy code, save in folder and refresh in browser.

<html>
<head>
<title>Basic Shapes</title>
<style>
/* center with yellow background and black border */
canvas {
    display:block;
    margin:10px auto 0;
    background: rgb(255,255,0);
    border:1px solid rgb(0,0,0);
}
</style>
</head>	
<body>	
<canvas id="shapes" width="600" height="600">
	Your browser does not support the HTML5 canvas tag </canvas>
<script>
	var canvas=document.getElementById("shapes");
	var ctx=canvas.getContext("2d");
	// Lines
	ctx.beginPath();
	ctx.moveTo(20, 20);
	ctx.lineTo(100, 200);
	ctx.moveTo(120, 200);
	ctx.lineTo(200, 20);
	ctx.lineCap = "round";
	ctx.lineWidth = 10;
	ctx.strokeStyle = "black";
	ctx.stroke();
	// Rectangle
	ctx.beginPath();
	ctx.rect(250, 125, 250, 80);
	ctx.lineWidth = 5;
	ctx.strokeStyle = "green";
	ctx.fillStyle = "red";
	ctx.fill();
	ctx.stroke();
	// Triangle
	ctx.beginPath();
	ctx.lineWidth = 3;
	ctx.moveTo(375,350);
	ctx.lineTo(375,500);
	ctx.lineTo(525,500);
	ctx.lineTo(375,350);
	ctx.fillStyle = "white"; 
	ctx.strokeStyle = "black";
	ctx.fill();
	ctx.stroke();
	// Circle
	var radius = 100;
	ctx.beginPath();
	ctx.arc(150, 400, radius, 0, 2 * Math.PI, false);
	ctx.lineWidth = 5;
	ctx.fillStyle = "cyan"; 
	ctx.strokeStyle = "orange";
	ctx.stroke();
	ctx.fill();
</script>
</body>
</html>

Add Text labels

<html>
<head>
<title>Basic Shapes</title>
</head>	
<body>	
<canvas id="canvas" width="600" height="600" 
	style="border:1px solid rgb(0,0,0);">
	Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
	var canvas=document.getElementById("canvas");
	var ctx=canvas.getContext("2d");
	// Fill Canvas
	ctx.fillStyle="yellow";
	ctx.fillRect(0,0,600,600);
	// Lines
	ctx.beginPath();
	ctx.moveTo(20, 20);
	ctx.lineTo(100, 200);
	ctx.moveTo(120, 200);
	ctx.lineTo(200, 20);
	ctx.lineCap = "round";
	ctx.lineWidth = 10;
	ctx.strokeStyle = "black";
	ctx.stroke();
	ctx.font = "30px Arial";
	ctx.fillStyle = 'rgb(0,0,0)';
	ctx.fillText("Lines",80,50);
	// Rectangle
	ctx.beginPath();
	ctx.rect(250, 125, 250, 80);
	ctx.lineWidth = 5;
	ctx.strokeStyle = "green";
	ctx.fillStyle = "red";
	ctx.fill();
	ctx.stroke();
	ctx.font = "30px Arial";
	ctx.fillStyle = 'rgb(0,0,255)';
	ctx.fillText("Rectangles",380,50);
	// Triangle
	ctx.beginPath();
	ctx.lineWidth = 3;
	ctx.moveTo(375,350);
	ctx.lineTo(375,500);
	ctx.lineTo(525,500);
	ctx.lineTo(375,350);
	ctx.fillStyle = "white"; 
	ctx.strokeStyle = "black";
	ctx.fill();
	ctx.stroke();
	// Circle
	var radius = 100;
	ctx.beginPath();
	ctx.arc(150, 400, radius, 0, 2 * Math.PI, false);
	ctx.lineWidth = 5;
	ctx.fillStyle = "cyan"; 
	ctx.strokeStyle = "orange";
	ctx.stroke();
	ctx.fill();
	</script>
</body>
</html>

Activity

Label the other shapes.

Structured Canvas

Polygons.

Copy code to editor, save in folder and refresh in browser.
Note the more structured code layout.

<!DOCTYPE html>
<title>Polygons Buttons</title>
<style>
/* center with yellow background black border */
canvas {
    display:block;
    margin:10px auto 0;
    background: rgba(255,255,125,1.0);
	 border: 1px rgb(0,0,0);
}
h3 {
	font-family: Arial;
	font-size: 1.5em;
	color: rgba(155,55,125,1.0);
	text-align:center;
} 	
.button {
	font-family: Arial;
	font-size: 0.7em;
	color: rgba(110,80,5,0.8);
} 	
</style>
</head>	
<body>	
<h3>Polygons</h3>
<canvas id="PolyCanvas" width="600" height="600"></canvas>
 <h3 align="center">
	<p>Click on the buttons below to draw a polygon. </p>
	<input type="button" class="button" value="Triangle" id="triangle" onclick="drawPolygon(200,3,115,75,5)" />
	<input type="button" class="button" value="Square" id="square" onclick="drawPolygon(180,4,215,125,195)" />
	<input type="button" class="button" value="Pentagon" id="pentagon" onclick="drawPolygon(150,5,225,25,15)" />
	<input type="button" class="button" value="Hexagon" id="hexagon" onclick="drawPolygon(150,6,85,225,5)" />
	<input type="button" class="button" value="Heptagon" id="heptagon" onclick="drawPolygon(150,7,185,185,15)" />
	<input type="button" class="button" value="Octagon" id="octagon" onclick="drawPolygon(150,8,15,25,195)" />
	<input type="button" class="button" value="Nonagon" id="nonagon" onclick="drawPolygon(150,9,15,5,5)" />
</h3> 
<script>
    var canvas=document.getElementById("PolyCanvas");
    var ctx=canvas.getContext("2d");

Polygons

Random.

Draw random circles.

Modify the script to draw random circles with random colours.
This is done by choosing random values for R G B.

Random Circles

Animation

Crab Images/Sprites

Crab 1

Move Down

Crab 2

<!DOCTYPE html>
<title>Crab Animate Keys</title>
<style>
/* center with yellow background black border */
canvas {
    display:block;
    margin:10px auto 0;
    background-image: url("images/underwater.png");
	 border: 1px rgb(0,0,0);
}
</style>
</head>	
<body>	
<canvas id="ImgCanvas" width="600" height="600"></canvas>
<script>
    var canvas=document.getElementById("ImgCanvas");
    var ctx=canvas.getContext("2d");

var character = new Image(); 
    character.src = "images/crab_claws.png"; // 8 crabs 60px X 60px
 
    var spriteWidth = 240, spriteHeight = 120; 
 
    var rows = 2, cols = 4; 
    var width = spriteWidth/cols; 
    var height = spriteHeight/rows; 
 
    var x=250, y=250; 
 
    var srcX, srcY; 
 
function ImgTimer () {
    ctx.clearRect(0, 0, ImgCanvas.width, ImgCanvas.height);
    ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height);
}

setInterval(ImgTimer, 40);
addEventListener("keydown", KeyDownHandler);
 
 </script>
 </body>
</html>