Question
Using Javascript, How can I create the following Image? How can I change the background color of the canvas to go from white to black?
Using Javascript, How can I create the following Image? How can I change the background color of the canvas to go from white to black?
I have some of the code but it needs fixing, I am missing some of the shapes.
Code:
#content-wrapper {
width: 600px;
margin: 0 auto;
text-align: center;
}
#canvasRun {
background-color: #c00;
border: 0;
color: #fff;
}
// Canvas Drawing Code Here
//var x = document.title;
//document.getElementById("content-wrapper").innerHTML = x;
var canvas = document.getElementById('myCanvas');
if (canvas.getContext)
{
var context = myCanvas.getContext('2d');
context.beginPath();
context.moveTo(220,230);
context.lineTo(190,300);
context.lineTo(300,300);
context.fillStyle = "green";
context.fill();
}
//Rectangle Script ends
//Circle Script Starts
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(240,75,50,0,2*Math.PI);
ctx.lineWidth = 10;
ctx.strokeStyle = "white";
ctx.fillStyle = "blue";
ctx.fill();
//Circle Script ends
//Arc Script Starts
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(450, 115, 75, 3.455, 5.9690, false);
context.lineWidth = 10;
context.strokeStyle = 'orange'
context.stroke();
//Arc script ends
//Rectangle Script Starts
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(600,45,150,90);
ctx.stroke();
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
context.strokeStyle = 'red';
context.stroke();
// Red rectangle
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(370,180,230,90);
ctx.stroke();
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started