In Class Canvas Code

siveambrai April 14, 2015 IDIA 619 SP2015 Comments Off on In Class Canvas Code

<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”){
drawCircle(canvas, context, fgColor);
}

drawText(canvas,context);
}

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();
}

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

context.arc(x, y, r, degreesToRadians(0),degreesToRadians(360), false)
context.fillStyle = fgColor;
context.fill();
}

function degreesToRadians(degrees) {
return (degrees * Math.PI)/180;
}

function drawText(canvas, context) {
var phrase = document.getElementById(“phrase”).value;
context.fillStyle = “black”;
context.font = “bold 1em sans-serif”;
context.textAlign = “left”;
context.fillText(phrase, 20, 40);

}
</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=”#ff69b4″>Yellow</option></select>
<br>
<input type=”text” id=”phrase” /><br>