In Class Code – 4/7/15

siveambrai April 8, 2015 IDIA 619 SP2015 Comments Off on In Class Code – 4/7/15

<html>
<head>
<script>
window.onload = function() {
var button = document.getElementById(“submit”);
button.onclick = drawShapes;
}

function drawShapes(){
var canvas = document.getElementById(“tshirtCanvas”);
var context = canvas.getContext(“2d”);

var selectObj = document.getElementById(“backgroundColor”);
var index = selectObj.selectedIndex;
var bgColor = selectObj[index].value;

var selectObj = document.getElementById(“shape”);
var index = selectObj.selectedIndex;
var shape = selectObj[index].value;

var selectObj = document.getElementById(“foregroundColor”);
var index = selectObj.selectedIndex;
var fgColor = selectObj[index].value;

context.fillStyle = bgColor;
context.fillRect(0, 0, 300, 200);

if(shape == “square”){
drawSquare(canvas, context, fgColor);
} else if(shape == “triangle”){

drawTriangle(canvas,context, fgColor);
}else if (shape == “circle”){

}
}

function drawSquare(canvas, context, fgColor) {
var w = Math.floor(Math.random() * 40);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);

context.fillStyle = fgColor;
context.fillRect(x, y, w, w);
}

function drawTriangle(canvas, context, fgColor) {
context.beginPath();
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.moveTo(x, y);
x = Math.floor(Math.random() * canvas.width);
y = Math.floor(Math.random() * canvas.height);
context.lineTo(x, y);
x = Math.floor(Math.random() * canvas.width);
y = Math.floor(Math.random() * canvas.height);
context.lineTo(x, y);
context.closePath();
context.lineWidth = 5;
context.stroke();
context.fillStyle = fgColor;
context.fill();
}
</script>
</head>
<body>
<canvas id=”tshirtCanvas” width=”300″ height=”200″ ></canvas><br>
<select id=”backgroundColor”><option value=”red”>Red</option><option value=”blue”>Blue</option><option value=”yellow”>Yellow</option></select>

<select id=”shape”><option value=”square”>Square</option><option value=”triangle”>Triangle</option><option value=”circle”>Circle</option></select>

<select id=”foregroundColor”><option value=”red”>Red</option><option value=”blue”>Blue</option><option value=”yellow”>Yellow</option></select>