+ 3
Why this the result an error ??
2 Answers
+ 4
something like this works because your canvas is being called without the window being load properly.
Also X, Y, Width and Height in your code is not defined and initialise, so I've used raw values here.
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(50, 60, 1500, 1500);
ctx.rect(0, 0, 200, 50);
ctx.fillStyle = "red";
ctx.fillStyle = "blue";
ctx.rect(0, 0, 200, 200);
ctx.strokeRect(0, 0, 100, 100);
ctx.strokeStyle = "red";
ctx.strokeRect(0, 0, 100, 100);
}
+ 3
js tab in android sololearn app' is loaded as it was included in the <head> section of the html tab, so when it run, document is not loaded (canvas is not yet accessible through DOM), so you need to wrap your code in an onload event handler:
onload = () => {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// ctx.rect(X, Y, Width, Height); // there's no X, Y, Width, nor Height variables
ctx.rect(0, 0, 200, 50);
ctx.fillStyle = "red";
ctx.fillStyle = "blue";
ctx.rect(0, 0, 200, 200);
ctx.strokeRect(0, 0, 100, 100);
ctx.strokeStyle = "red";
ctx.strokeRect(0, 0, 100, 100);
};
commented one line throwing error ;)