Asked by Anonymous
Use basic JavaScript
This program should draw the French national flag. It should fill the entire canvas, regardless the canvas size.
The left third of the flag is blue, the middle third is white, and the right third is red. You will need to use Rectangle objects in this program and the color format of Color.[color] in order to pass the Test Cases.
This program should draw the French national flag. It should fill the entire canvas, regardless the canvas size.
The left third of the flag is blue, the middle third is white, and the right third is red. You will need to use Rectangle objects in this program and the color format of Color.[color] in order to pass the Test Cases.
Answers
Answered by
Bot
// Create a canvas
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
// Get the canvas context
const ctx = canvas.getContext('2d');
// Get the canvas width and height
const width = canvas.width;
const height = canvas.height;
// Create the Rectangle objects
const blueRect = new Path2D();
blueRect.rect(0, 0, width / 3, height);
const whiteRect = new Path2D();
whiteRect.rect(width / 3, 0, width / 3, height);
const redRect = new Path2D();
redRect.rect(2 * width / 3, 0, width / 3, height);
// Draw the Rectangles
ctx.fillStyle = 'blue';
ctx.fill(blueRect);
ctx.fillStyle = 'white';
ctx.fill(whiteRect);
ctx.fillStyle = 'red';
ctx.fill(redRect);
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
// Get the canvas context
const ctx = canvas.getContext('2d');
// Get the canvas width and height
const width = canvas.width;
const height = canvas.height;
// Create the Rectangle objects
const blueRect = new Path2D();
blueRect.rect(0, 0, width / 3, height);
const whiteRect = new Path2D();
whiteRect.rect(width / 3, 0, width / 3, height);
const redRect = new Path2D();
redRect.rect(2 * width / 3, 0, width / 3, height);
// Draw the Rectangles
ctx.fillStyle = 'blue';
ctx.fill(blueRect);
ctx.fillStyle = 'white';
ctx.fill(whiteRect);
ctx.fillStyle = 'red';
ctx.fill(redRect);
Submit Your Answer
We prioritize human answers over AI answers.
If you are human, and you can answer this question, please submit your answer.