<html>
<head>
<script type=”application/javascript”>
function draw() {
var canvas = document.getElementById(“awesomeCanvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
ctx.fillStyle=”FFCF5F”;
ctx.fillRect(0,0,299,299);
ctx.fillStyle=”FF849B”;
ctx.fillRect(0,300,299,299);
ctx.fillStyle=”7ECEFF”;
ctx.fillRect(0,600,299,299);
ctx.fillStyle=”D3FFE3″;
ctx.fillRect(300,0,299,299);
ctx.fillStyle=”FF7D71″;
ctx.fillRect(300,300,299,299);
ctx.fillStyle=”FF9AEF”;
ctx.fillRect(300,600,299,299);
ctx.fillStyle=”96B8E8″;
ctx.fillRect(600,0,299,299);
ctx.fillStyle=”ADE8D0″;
ctx.fillRect(600,300,299,299);
ctx.fillStyle=”FFF378″;
ctx.fillRect(600,600,299,299);
}
}
function drawing1() {
var canvas = document.getElementById(“awesomeCanvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
var img=document.getElementById(“puppy1”);
ctx.drawImage(img,25,65);
}
}
function drawing2() {
var canvas = document.getElementById(“awesomeCanvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
var img=document.getElementById(“puppy2”);
ctx.drawImage(img,325,65);
}
}
function drawing3() {
var canvas = document.getElementById(“awesomeCanvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
var img=document.getElementById(“puppy3”);
ctx.drawImage(img,625,65);
}
}
function drawing4() {
var canvas = document.getElementById(“awesomeCanvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
var img=document.getElementById(“puppy4”);
ctx.drawImage(img,25,365);
}
}
function drawing5() {
var canvas = document.getElementById(“awesomeCanvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
var img=document.getElementById(“puppy5”);
ctx.drawImage(img,335,310);
}
}
function drawing6() {
var canvas = document.getElementById(“awesomeCanvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
var img=document.getElementById(“puppy6”);
ctx.drawImage(img,625,365);
}
}
function drawing7() {
var canvas = document.getElementById(“awesomeCanvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
var img=document.getElementById(“puppy7”);
ctx.drawImage(img,25,665);
}
}
function drawing8() {
var canvas = document.getElementById(“awesomeCanvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
var img=document.getElementById(“puppy8”);
ctx.drawImage(img,325,665);
}
}
function drawing9() {
var canvas = document.getElementById(“awesomeCanvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
var img=document.getElementById(“puppy9”);
ctx.drawImage(img,625,665);
}
}
</script>
</head>
<body onload= “draw();”>
<button onclick=”drawing1()”>cutiepie</button>
<button onclick=”drawing2()”>sweetcheeks</button>
<button onclick=”drawing3()”>honeybunny</button>
<button onclick=”drawing4()”>babycakes</button>
<button onclick=”drawing5()”>woof</button>
<button onclick=”drawing6()”>birdie</button>
<button onclick=”drawing7()”>tweety</button>
<button onclick=”drawing8()”>pumpkin</button>
<button onclick=”drawing9()”>babydoll</button>
<canvas id=”awesomeCanvas” width=”900″ height=”900″></canvas>
<div><img id=”puppy1″ src=”puppy1.jpg”></div>
<img id=”puppy2″ src=”puppy2.jpg” >
<img id=”puppy3″ src=”puppy3.jpg” >
<img id=”puppy4″ src=”puppy4.jpg” >
<img id=”puppy5″ src=”puppy5.jpg” >
<img id=”puppy6″ src=”puppy6.jpg” >
<img id=”puppy7″ src=”puppy7.jpg” >
<img id=”puppy8″ src=”puppy8.jpg” >
<img id=”puppy9″ src=”puppy9.jpg” >
</body>
</html>