Drawing a canvas on another canvas is blurry. How can i fix this?

Question

I worked with some HTML5 canvas experiments and edited a series of technical experiments https://github.com/AlexChesser/jsSprite (WSAD, Q, E, X on Minotaur demos, add C and B to the Zombie demo)

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

However, if you compare with the demo where I put Minotaur on the canvas, then we draw this canvas on the parent, the result will be blurry: 03-drawn_minotaur_on_canvas.php

How can I make sure the canvas on the canvas is not blurred?

EDIT full code included in GIT: https://github.com/AlexChesser/jsSprite

edit2: note that Google marks my domain as malware (which is true, since the hosting provider was hacked, there was a short moment when there was some kind of malware), and not a vulnerable connection, I updated to point exclusively to source on github.

Answer 1

It's a difficult question!

For a canvas, you are not actually using a style to determine its width and height.

So, setting the style of the canvas, you actually distort the canvas.

Thus, writing <canvas id="game" width=512 height=512> </canvas> on your main page will fix your problem.

I tested it to confirm that this is really a problem, so if something is wrong let me know and I will send you my code.

There should also not be MainContext.drawImage(m.canvas, 0, 0); ? Otherwise you grunt the Minotaur?