HTML5 Canvas drawing and updating

Question

Sorry for how vague the title is, but I'm not completely sure how to sum up what I'm trying ask.

First off, here is a jsFiddle of what I have so far.

I'm just starting off learning to use the HTML5 canvas element, as well as using js OOP.

As you can see from the fiddle, I create a rectangle class (so that I may create as many squares as possible, although I think that may be redundant), and reference it to draw. However, when I set the height = width, I always end up with a non-square. I'm relatively new to using the canvas, but I assume thats because the square's height and width are relative to the size of the canvas element, and so the canvas element's height and width must not be proportional (since their assigned percent values as opposed to definite pixels).

I can fix this by setting the size of the square to pixels, but then when my keypress event is called, the square doesn't move at all.

Also, I have the keypress event so that a user can move the square with the arrow keys. However, the up/down keys values seem to be inverted, even when I flip-flop them in the code? And the left/right keys don't do anything?

And, I also can only make the square move up/down once? Shouldn't my code allow me to increase my x/y values as long as the user keeps pushing the corresponding buttons?

If someone could check this out and give me some pointers as to what I'm doing wrong, that would be great! I'm trying a lot of new things with this, as its just a learning experience, so if you feel so inclined, help me learn!

Answer 1

You experienced a thing that often goes wrong with resizing a canvas - trying to use CSS for it. Using CSS for canvas drawing will scale it - not changing the resolution. For setting the resolution, use the width= and height= attributes in HTML.

As for the movements, it appears that keyup works better. However, for the up key, the y would decrement (top is 0, bottom is something positive).

A few other things I'd like to highlight.

Using canvas as a variable name for the context is a little ambiguous. There is a difference between the canvas and its context used for drawing.

Also, you state //browser doesn't support html5 if ctx does not exist. However, in case the browser does not support canvas/HTML5, the .getContext('2d') function call will fail already because it's not a function in that case. Your else statement will only get executed if the function does exist but does not return something. That will probably never be the case.

Empty else loops aren't very useful either, but that doesn't hurt :)

http://jsfiddle.net/DqrEm/4/

Answer 2

Your problem isn't with the size of your square, but with how you size your canvas. In your jsfiddle, when I changed the canvas starting line to <canvas id="practice" width="500" height="500"> the square was drawn properly. I tried changing the width and height in the CSS from 100% to 500px but the square was still drawn incorrectly.

Update: Setting the width and height to 100% in the actual canvas tag(i.e <canvas id="practice" width="100%" height="100%">) works too.