Canvas code wouldn’t work

I tried same canvas code as the sololearn but it doesn’t work. I’m Using Notepad++. <html>.... <body> <canvas id="canvas1" width="400" height="300"></canvas> <script> var canvas=Document.getElementByid("canvas1"); var ctx=canvas.getContext("2d"); ctx.fillstyle = "#FF0000"; ctx.fillRect(10,10, 100, 100);  ctx.rotate( (Math.PI / 180) * 25); //rotate 25 degrees. ctx.fillstyle = "#0000FF"; ctx.fillRect(10,10, 100, 100); </script> </body> ....</html>

canvas error

18th Feb 2018, 11:32 AM

FZoberistF

6 Answers

+ 6

Because it's document.getElementById but you wrote Document.getElementByid which is incorrect. //check below it's correct var canvas=document.getElementById("canvas1");

18th Feb 2018, 12:36 PM

Lord Krishna

+ 5

did you remove the dots & write document.getElementById correctly? The below code is working fine. if the below doesn't work then it may be your browser or device. <html> <body> <canvas id="canvas1" width="400" height="300"></canvas> <script> var canvas=document.getElementById("canvas1"); var ctx=canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(10,10, 100, 100); // ctx.fillrect(x,y,width,height) ctx.rotate( (Math.PI / 180) * 25); //rotate 25 degrees. ctx.fillStyle = "#0000FF"; ctx.fillRect(10,10, 100, 100); </script> </body> </html>

18th Feb 2018, 12:54 PM

Lord Krishna

+ 5

There was a typo in fillStyle the S should be capital in it. check the demo it shows colors now.

18th Feb 2018, 1:14 PM

Lord Krishna

+ 1

Yeah. Let me try this... Thanks.

18th Feb 2018, 12:56 PM

FZoberistF

It still doesn’t work!!

18th Feb 2018, 12:51 PM