Command fillRect() in Javascript does not work
Question
I'm currently undergoing the development of a game, but I've stumbled across a problem where the fillRect() command will not work onto the HTML5 canvas, using Javascript. I do not know why this is happening, after trying to do research on it and checking my code. The HTML code is shown below:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Cube Quest</title> <style> #game { border: 1px dashed black; } </style> </head> <body> <canvas id="game" width='1280' height='720'>Your browser does not support the canvas element in HTML5.</canvas> <script> var clicked = false; // Mouse handling event var mouseX = event.cilentX; // Mouse X coordinate var mouseY = event.cilentY; // Mouse Y coordinate var canvas = document.getElementById("game"); // For canvas var ctx = canvas.getContext("2d"); // For canvas ctx.fillStyle = 'black'; // rectangle color selection ctx.fillRect(10, 10, 150, 80); </script> </body> </html>
I'm not the best expert on Javascript, so there is little that I know which could help me understand the reason why no rectangle shows when the code is correct.
I appreciate the help on this specific question in advance. :)
3 answers
solution1
2 ACCPTED 2018-05-09 06:31:52
You will need to look addEventListener function in JS to made better view of situation. Here working example :
// globals var canvas = document.getElementById("game"); var clicked = false; // Mouse handling event var mouseX = 0; var mouseY = 0; // yuor application parameters var app = { clearCanvas: true, title: 'HELLO' }; canvas.addEventListener('click' , function (event){ mouseX = event.pageX; // Mouse X coordinate mouseY = event.pageY; // Mouse Y coordinate console.log("Mouse x : " + mouseX + " Mouse y :" + mouseY ); drawAgain(); }); // Initial draw var ctx = canvas.getContext("2d"); // For canvas ctx.fillStyle = 'black'; // rectangle color selection ctx.fillRect(mouseX, mouseY, 350, 65); ctx.font="30px Arial"; ctx.fillStyle = 'lime'; ctx.fillText(app.title + "X:" + mouseX + " Y:" + mouseY , mouseX + 35, mouseY + 40, 250) // Draw when you need function drawAgain () { if (app.clearCanvas == true){ ctx.clearRect(0, 0, canvas.width, canvas.height); } ctx.fillStyle = 'black'; // rectangle color selection ctx.fillRect(mouseX, mouseY, 350, 65); ctx.fillStyle = 'lime'; ctx.fillText(app.title + " X:" + mouseX + " Y:" + mouseY , mouseX + 35, mouseY + 40, 400) }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Cube Quest</title> <style> #game { border: 1px dashed black; } </style> </head> <body> <canvas id="game" width='1280' height='720'>Your browser does not support the canvas element in HTML5.</canvas> <script> </script> </body> </html>
Suggestion: Also learn to use removeEventListener , lot of web developers have trouble with event conflict situation when they use lot of lib's. For dynamic app flow methodology use removeEventListener before setting a flags.
solution2
0 2018-05-09 06:47:21
Having error in event.cilentX because event is not available at this moment so that is not moving to next lines of code to execute. If you want to play with event you need to attache any event listener like canvas.addEventListener('click' , function (event){//here you will get the event}); . I just commented the two line now it working fine to draw rectangle.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Cube Quest</title> <style> #game { border: 1px dashed black; } </style> </head> <body> <canvas id="game" width='1280' height='720'>Your browser does not support the canvas element in HTML5.</canvas> <script> var clicked = false; // Mouse handling event // var mouseX = event.cilentX; // Mouse X coordinate // var mouseY = event.cilentY; // Mouse Y coordinate var canvas = document.getElementById("game"); // For canvas var ctx = canvas.getContext("2d"); // For canvas ctx.fillStyle = 'black'; // rectangle color selection ctx.fillRect(10, 10, 150, 80); </script> </body> </html>
solution3
0 2018-05-10 06:15:49
It's your mouse event listeners that are breaking the program.
Comment them out and it works just fine.
Here is a code snippet I use for small JavaScript games I test out.
//Mouse Events ==================
document.onmousemove = mousePos;
document.onmousedown = function() { mouse.clicked = true; };
document.onmouseup = function() { mouse.clicked = false; };
//MOUSE
var mouse = {
x: 0,
y: 0,
clicked: false
};
function mousePos (e) {
mouse.x = e.pageX - canvas.offsetLeft;
mouse.y = e.pageY - canvas.offsetTop;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.