Tell me more ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.
up vote -5 down vote favorite

How to create in HTML5 canvas viewport? something like for tile maps.

share|improve this question
3  
Can you please elaborate a little? your question is vague or incomplete and cannot be answered in it's current state. – rlemon May 15 '12 at 16:07
Indeed, you need to elaborate. I bet you want something more than just <canvas />. – Laurent Couvidou May 15 '12 at 17:38
I took the assumption you just want the canvas to fit the entire screen... accommodating for resize. check answer below, if that was the wrong assumption then correct me and i'll revise my answer. cheers. – rlemon May 15 '12 at 17:57

2 Answers

up vote 3 down vote

Taking a wild stab at what you want I will give you a few ways of doing this:

Pure CSS way... (simplified)

HTML 

<body><canvas>Canvas not supported</canvas></body>

CSS 

html, body, canvas {
 height: 100%; width: 100%; padding: 0; margin: 0; 
}​

The JS way

HTML 

<body><canvas id="cvs">Canvas not supported</canvas></body>

JS 

window.onload = function() {
    var cvs = document.getElementById("cvs"),
        height, width;
    this.onresize = function() {
        height = window.innerHeight, width = window.innerWidth;
        cvs.setAttribute("height", height);
        cvs.setAttribute("width", width);
    };
    this.onresize.call();
};
share|improve this answer
up vote 1 down vote

You didn't say whether you're using the 2d context or WebGL; I'll assume that you're using 2d context.

You can use the 2d context object's transformation methods to set the translation.

Normally this means that at the beginning of rendering each frame, you reset the transformation, with a call such as:

ctx.setTransform(1,0,0,1,0,0);

Then you transform based on your current viewport, such as:

ctx.translate(- offsetX, - offsetY);

This assumes that you have variables offsetX and offsetY which contain the coordinates of the top-left corner of the viewport.

Then you can just render all objects normally using "World coordinates" and have the outcome you expect.

Culling is left as an exercise for the reader :)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.