Drawing a canvas on another canvas is blurry. How can I fix it?

Question

I've been working with some HTML5 canvas experimentation and has a series of tech experiments edit https://github.com/AlexChesser/jsSprite (WSAD,Q,E,X keys on the Minotaur key demos, add C and B on the Zombie Demo)

If you look at demo number 1: 01-draw_minotaur.php you'll see an image drawn directly on the canvas, and it looks nice and sharp.

However, if you compare to the demo where I put the Minotaur on a canvas then draw that canvas on the parent, the result is blurry: 03-drawn_minotaur_on_canvas.php

How can I make sure the canvas on canvas drawing isn't blurry?

EDIT full code is up on GIT: https://github.com/AlexChesser/jsSprite

edit2: note that google has flagged my domain as malware (which to be fair, since hosting provider was hacked there was a brief moment that there was some sort of malware in there) rather than leave the vulnerable link up, I've updated to point exclusively to the source in github.

Answer 1

This is a tricky one!

For canvas, you don't actually use Style to determine its width and height.

So by you setting the style of the canvas you are actually distorting the canvas.

So writing <canvas id="game" width=512 height=512> </canvas> in your main page will fix your problem.

I tested it to confirm that was indeed the problem, so if there's still something wrong, let me know and I'll send you my code.

Also shouldn't it just be MainContext.drawImage(m.canvas, 0, 0); ? Otherwise you're squishing the Minotaur?