Using Canvas, how to draw a shape X-times entered by the user?

Question

I'm trying to draw 30 rectangles and the n-th rectangle is the number entered by the user. Every n-th rectangle will be a color entered by the user. Here's what I have below:

 <script> let n = document.getElementById("number") let colors = document.getElementById("color") function drawRectangle() { let a = n.value let b = colors.value document.getElementById("output").innerHTML = "Every " + a + " rectangle is " + b; myShape(); } function myShape() { let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); let x; let y; ctx.beginPath(); ctx.lineTo(0,0); ctx.lineTo(10,0); ctx.lineTo(10,10); ctx.lineTo(0,10); ctx.lineTo(0,0); ctx.fillStyle = "red"; ctx.fill(); ctx.stroke(); ctx.strokeRect(0,0,10,10); ctx.strokeRect(10,0,10,10); ctx.strokeRect(20,0,10,10); ctx.strokeRect(30,0,10,10); ctx.strokeRect(40,0,10,10); ctx.strokeRect(50,0,10,10); ctx.strokeRect(60,0,10,10); ctx.strokeRect(70,0,10,10); ctx.strokeRect(80,0,10,10); ctx.strokeRect(90,0,10,10); ctx.strokeRect(100,0,10,10); ctx.strokeRect(110,0,10,10); ctx.strokeRect(120,0,10,10); ctx.strokeRect(130,0,10,10); ctx.strokeRect(140,0,10,10); ctx.strokeRect(150,0,10,10); ctx.strokeRect(160,0,10,10); ctx.strokeRect(170,0,10,10); ctx.strokeRect(180,0,10,10); ctx.strokeRect(190,0,10,10); ctx.strokeRect(200,0,10,10); ctx.strokeRect(210,0,10,10); ctx.strokeRect(220,0,10,10); ctx.strokeRect(230,0,10,10); ctx.strokeRect(240,0,10,10); ctx.strokeRect(250,0,10,10); ctx.strokeRect(260,0,10,10); ctx.strokeRect(270,0,10,10); ctx.strokeRect(280,0,10,10); ctx.strokeRect(290,0,10,10); ctx.strokeRect(300,0,10,10); } document.getElementById("display").onclick = drawRectangle;

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> CPSC 1045 Midterm 2 Practical Exam </title> </head> <body> <h1>Let's Display Some Rectangles</h1> <p>This application will diplay a series of rectangles on the screen, filling every Nth rectangle with the specified colour</p> <p>Enter a number for N:<input type="number" id="number" max="30"></p> <p>Enter the color: <input type="color" id="color"></p> <button id="display">Display</button> <p id="output">Output here</p> <canvas id="myCanvas" height="50" width="300" style="border: 1px solid black">

How do you get the value and color entered by the user and make every n-th rectangle the color entered by the user?

Answer 1

Use an array to make your rectangles, then use the Modulo operator to select each nth item in and paint it the color that the end user wants.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> CPSC 1045 Midterm 2 Practical Exam </title> </head> <body> <h1>Let's Display Some Rectangles</h1> <p>This application will diplay a series of rectangles on the screen, filling every Nth rectangle with the specified colour</p> <p>Enter a number for N:<input type="number" id="number" max="30"></p> <p>Enter the color: <input type="color" id="color"></p> <button id="display">Display</button> <p id="output">Output here</p> <canvas id="myCanvas" height="50" width="300" style="border: 1px solid black"></canvas> <script> let n = document.getElementById("number") let colors = document.getElementById("color") function drawRectangle() { let a = n.value let b = colors.value document.getElementById("output").innerHTML = "Every " + a + " rectangle is " + b; myShape(a, b); } function myShape(a, b) { let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); let x = 0; let y = 0; var rectArr = []; ctx.beginPath(); ctx.lineTo(0,0); ctx.fillStyle = b; for (var i = 0; i < 30; i++) { if (i%a == 0) { ctx.fillRect(x, 0, 10, 10); x += 10; } else { ctx.strokeRect(x, 0, 10, 10); x += 10; } } ctx.fill(); ctx.stroke(); } document.getElementById("display").onclick = drawRectangle; </script> </body> </html>

Using Canvas, how to draw a shape X-times entered by the user?

Question

1 answers

solution1
1 ACCPTED 2019-03-21 20:03:07

Using Canvas, how to draw a shape X-times entered by the user?

Question

1 answers

solution1 1 ACCPTED 2019-03-21 20:03:07

solution1
1 ACCPTED 2019-03-21 20:03:07