0

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.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, 11:32 AM
FZoberistF
FZoberistF - avatar
6 RĂ©ponses
+ 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
Lord Krishna - avatar
+ 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
Lord Krishna - avatar
+ 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
Lord Krishna - avatar
+ 1
Yeah. Let me try this... Thanks.
18th Feb 2018, 12:56 PM
FZoberistF
FZoberistF - avatar
0
It still doesn’t work!!
18th Feb 2018, 12:51 PM
FZoberistF
FZoberistF - avatar
0
I think my browser is the problem. When i changed it though, in firefox too it has problem. Two squares appear but they both are black.
18th Feb 2018, 1:07 PM
FZoberistF
FZoberistF - avatar