Problem with image qulity on html 5

Problem with image qulity on html 5
0.0 0


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

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

link 1.

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

link 2.

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.

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

image on html5 canvas without cocos2d engine

          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.


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.


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>
	<meta charset="UTF-8">
	<script src="ht.js"></script>
	<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);