CODEWITHSUNDEEP
javascriptandroidhtmlcanvascocoonjs
Jatin
Jatin

Reputation: 351

Cocoon JS Canvas Scaling

I have made a small HTML 5 canvas application with fixed size of 640*480. Code is written considering 640*480 canvas (say to paint text or to draw image - fixed coordinates have been used).

Everything is working fine in ipad mini i.e. scaling and touch coordinates.

But scaling is a problem in Android. I have referred CocoonJS Demo List as well. They have specifically set margin:0px for android.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style type="text/css">body { margin: 0px; }</style> <!-- Android fix -->
</head>
<body>
<script src="main.js"></script>
</body>
</html>

I have used code like this in render() function 

context.font = '20pt Calibri';
context.fillStyle = 'rgb(250,130,50)';
context.fillText("Score : "+score,canvas.width-150,30);

Score here does not display correctly as expected.

Referred CocoonJs documentation they said to follow this notation : 

var canvas = document.createElement('canvas');
canvas.width= 640;
canvas.height= 480;
document.body.appendChild(canvas);
ctx= canvas.getContext("2d", {antialias : true });

Can anybody suggest something or give direction so that it scales properly?

Upvotes: 0

Views: 646

Answers (1)

ErzenKomoni
ErzenKomoni

Reputation: 1

For now on, the correct way of getting screen size is

window.innerWidth

and

window.innerHeight

To make your Canvas objects full screen, set

canvas.width= window.innerWidth; canvas.height= window.innerHeight

CocoonJS a survival guide

Upvotes: 0

Related Questions