Problem with image qulity on html 5

cocos2d-x JavaScript
#1

Hello, i have some problem with image quality on cocos2d engine.

Could you give me some advice or some sort of solutions?

link 1. http://115.71.1.40/jjong01/

The above url shows the image on html5 canvas without cocos2d engine

link 2. http://115.71.1.40/poker_Test7/

And the second link shows the image output on html5 (but this time it uses cocos2d engine.)

Here’s the problem.

As you can see, the image on link 1 is surely claer than the image on link 2.

Somehow the image on link 2 looks like it has lower resolutions. but the original image on both links are exact same.

Here’s the link to the original 1280*720 image.

link 3. http://115.71.1.40/jjong01/1280.png

If you check out these images on mobile, the qulity on link 2 image become worse (particulary in vertical image mode).

here’s examples of mobile display

f8e63eec6136e35d.png1080×848

image on html5 canvas without cocos2d engine

19c06d6dc8973a61.png1080×629 

          image output on html5 using cocos2d engine

it is easier to see in this way.

you can definitely tell the difference between those two.

I wonder what’s the problem on the image with cocos2d engine.

Did i jsut misused the API regarding resolutions? or, does the coscos2d engine not support 1280*720 on html5?

it will be my pleasure if you could help me :wink: (even a little clue could be a help)

thank you.

#2

we had lot issues with images quality in cocos - it is not clear why - but in most cases you should increase your canvas resolution depending on screen size you using.

#3

I am facing the same issue.
If i am drawing the image on canvas without using cocos2d then image quality is very good and image is not blurry but when i am using cocos2d html then images appear blurry.

I am not getting clear and sharp images like we usually get on html5 canvas.

I don’t know why they have configured their game canvas like this.
Is there any solution to this problem ?.

I have attached screenshot you may look at it.

I have used this code to draw image on canvas without cocos

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>ht</title>
	<script src="ht.js"></script>
	</head>
	<body onload="init();" style="background-color:#D4D4D4">
		<canvas id="canvas" width="1000" height="650" style="background-color:#FFFFFF"></canvas>
		<script type="text/javascript">

		function init(){
		    var canvas = document.getElementById('canvas');
		    var ctx = canvas.getContext('2d');
		    var img = new Image();
		    img.src = "images/isometricCard.png";
		    img.onload = function() {
		     ctx.drawImage(img, 50, 50);
		    };
		}

		</script>
	</body>
	</html>