Question: Using Javascript, How can I write a code to have shapes, like a circle, an arc, triangle, rectangle and a picture? Also how can I
Using Javascript, How can I write a code to have shapes, like a circle, an arc, triangle, rectangle and a picture?
Also how can I write the code so the shapes come out when the click button is pressed?
The following is some of the code I have but it is not working properly. I need help on fixing the code to have it running.
body {
margin: 0px;
padding: 0px;
}
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(288, 75, 70, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'red';
context.fill();
context.strokeStyle = '#550000';
context.stroke();
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(400,60,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;
// line color
context.strokeStyle = 'black';
context.stroke();
function draw()
{
var canvas = document.getElementById('myCanvas');
if (canvas.getContext)
{
var context = myCanvas.getContext('2d');
context.beginPath();
context.moveTo(75,75);
context.lineTo(10,75);
context.lineTo(10,25);
context.fill();
}
}
Thank you
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
