Canvas, images aren't sharp

Hi this is my first time trying with canvas, but not with javascript. Everything in canvas isn’t sharp like rectangles and images.
HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body id="body">
	<div id="hide">
	<canvas id="canvas"></canvas>
	<img src="pictures_objects/coin.png" id="money" />
	</div>
  </body>
	<script src="script.js"></script>
</html>

CSS

canvas {
	outline: 1px solid #000;
	width: 500px;
	height: 500px;
	z-index: 1;
}
#money {
	z-index: 2;
	display: inline;
	margin-top: 0px;
	margin-left: -150px;
	width: 108px;
}

Javascript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var moneyI = new Image();
moneyI.src = 'pictures_objects/coin.png';
var xPosr = 0;
var yPosr = 0;
context.rect(xPosr, yPosr, 50, 25);
context.stroke();
context.drawImage(moneyI, 10, 10, 65, 35);

function move(e) {
	
	if (e.keyCode == 39) {
		//right key
		xPosr = xPosr + 5;
	}
	else if (e.keyCode == 37) {
		//left key
		xPosr = xPosr - 5;
	}
	else if (e.keyCode == 38) {
		//up key
		yPosr = yPosr - 5;
	}
	else if (e.keyCode == 40) {
		//down key
		yPosr = yPosr + 5;
	}
	canvas.width = canvas.width;
	context.rect(xPosr, yPosr, 50, 25);
	context.stroke();

	if (xPosr > 235 && xPosr < 255 && yPosr > 115 && yPosr < 135 == true) {
		alert("Win");
	}
}

document.onkeydown = move;

I know that The money image(in the canvas) will will disappear when you move but firstly I want to solve why images aren’t sharp. I will remove the image from HTML, It’s only there because I compared the size of that image to the image in the canvas.
here’s the link: https://repl.it/@lolfail/randomgame

2 Likes

If I’m not mistaken, you haven’t created a way for it to be seen. I could be mistaken, but I think I’m right.

I hope this helps =)

*If not, please let me know!

Thanks for your answer, How do you mean

1 Like

It’s not visible is what I mean.

Does that clarify?

@trevorhodges How can I make it visible? Like setting its visibility using the style tag?

1 Like

As long as I answered to any post, I read all notifications, and would get it so you can save energy. If I haven’t responded, then do the @ thing.

You need to make so that when a button of something is clicked, it will unhide it.

I hope this helps =)

document.getElementById(“hide”).style.visibility = “hidden”

That is there because when you move the rectangle to the coin’s position everything will disappear, like you’ve won the game.
I deleted it and replaced it with alert(), the images and others still aren’t sharp and I replaced it also in the post

1 Like

I saw. But I didn’t get any alerts because there was only 1 coin. You would need more to win.

1 Like

Yes, thanks for the tip I’ll build it in once I fixed the problem. In the original code you needed to collect the image coin that’s why it doesn’t react to the canvas coin.
Anyway could you tell me why images and other’s aren’t seen sharp? Shall I start a new project and try it from the start?

1 Like

I’ve figured it out, You have to set the width and height in the html tag like

<canvas id="myCanvas" height="500" width="500"></canvas>

Because if you set it like it’s some element using CSS and style it will be very awkward.
Doing it normally will greatly affect the way you can position elements inside it.

1 Like

Good. You figured it out with some very little guidance (that is on the edge on my knowledge :grinning: )