I need help drawing two shapes in JS

Question

I draw my black circle just fine, but when I add a square it turns the the circle blue as well. When I draw a line with those it puts a line with them connecting to to lines and messes up the context.fillStyle
PLEASE HELP!!
https://code.sololearn.com/Wf50eY68m9t4/?ref=app

Answer 1

You need to create seperate variables for each of your rendering context2d objects. Currently you only have one context variable for all of your rendered objects.
var context = canvas.getContext('2d');
context.fillStyle = "blue";

Instead I would seperate the objects and give each identifiable names.

const canvas = document.getElementById("canvas");

const square = canvas.getContext("2d");
square.fillStyle = "blue";
square.fillRect(10, 10, 50, 50);

const circle = canvas.getContext("2d");
circle.fillStyle = 'black';
circle.beginPath();
circle.arc(200, 40, 30, 0, 2 * Math.PI);
circle.fill();

Answer 2

https://code.sololearn.com/WGCm38RskvL8/?ref=app

Answer 3

I can't get it to work can you check on my code?

Answer 4

If you edit my code, would it show on my device? If so, can you edit it so it is fixed? Thanks.

Answer 5

Thank you a lots