Check this ? Please somebody tell why is the rectangle can't draw and why it showing error in 2 line??

Question

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

Answer 1

This code will output your rectangle.

However, the fill colour will be black

window.onload = function(){
var can=document.getElementById("canvas1");
var ctx = can.getContext("2d");
ctx.fillRect(100 , 70, 10, 10);
ctx.fillStyle = "red";
}

Answer 2

Problem 1: you shouldn't put the variable declaration in two separate lines.

Problem 2: you are executing this before the page loads, so your variable will also be undefined -> put everything in this function:

window.onload = () => {
//code here
}
(don't forget that to make the variable global scope you shouldn't use any keyword)

Answer 3

also, the rectangle will be black, because you changed the fillStyle after you made the rectangle, you should put that before filling it

Answer 4

Can u please show me how
🙏🙏

Answer 5

😙😙thanks

Answer 6

Bro what is the best resource to learn advanced canvas

Answer 7

See here https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Answer 8

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

Also, putting the canvas outside the body tag is just a bad idea