Question: Using the Following Code please add the following - Add a new function, drawSquare, that takes the canvas, context, and a color as parameters. -
Using the Following Code please add the following
- Add a new function, drawSquare, that takes the canvas, context, and a color as parameters.
- Define the drawSquare function to generate a width between 0 and 40 and coordinates within the canvas
- Use the color as a fillStyle and draw a rectangle using the random values
- Call your new drawSquare from within the artGenerator for loop so that we draw squares and circles.
- Use a random value to decide whether to draw a square or a circle, and change your for loop to use an if/else and draw either a square or a circle for each value of i
---------------------------------------------------------------------------------------------------
function artGenerator() {
var canvas = document.getElementById('artCanvas');
var context = canvas.getContext('2d');
//clear our canvas
fillBackgroundColor(canvas, context);
//draw shapes
var colors = ['orange','cyan','gray','green','black','pink'];
for(var i=0; i<15; i++) {
var color = colors[Math.floor(Math.random() * colors.length)];
drawCircle(canvas,context,color);
}
//generate a random title
var title = makeTitle();
//draw the title
drawText(canvas,context,title)
}
function makeTitle () {
var lines = [['Meditative', 'Shapes', 'Art', 'Objective', 'Insperation'],['Ellipses','State', 'Emtion','Composition'],['I','II','III','V']];
var title = '';
for (var i=0; i var random = Math.floor(Math.random() * lines[i].length); title += lines[i][random] + ' '; } return title; } function degreesToRadians(degrees) { return (degrees * Math.PI)/180; } function drawText(canvas, context, title){ context.fillStyle = 'white'; context.font = 'bold 1em sans-serif'; context.textAlign = 'right'; context.fillText(title, canvas.width - 20, canvas.height - 40); } function drawCircle(canvas,context,color) { var radius = Math.floor(Math.random() * 40); var x = Math.floor(Math.random() * canvas.width); var y = Math.floor(Math.random() * canvas.height); context.beginPath(); context.arc(x, y, radius, 0, degreesToRadians(360), true); context.fillStyle = color; context.fill(); } function fillBackgroundColor(canvas, context){ var colors = ['red', 'blue','green','yellow','black']; var color = colors[Math.floor(Math.random() * colors.length)]; context.fillStyle = color; context.fillRect(0,0,canvas.width,canvas.height); } window.onload = function () { var button = document.getElementById('artButton'); button.onclick = artGenerator; };
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
