3

I am trying to learn how to use canvas so I can experiment with creating web apps and web games in my spare time. I like the fact that you can draw objects on the page. Anyhow I would like to know how I could make the canvas quite large then zoom into a certain point then dynamically move this viewbox with the player. I would also like to know how to implement zoom in and out.

Pretty much what I am trying to say is how can I create a 2D 'world' like on http://www.agar.io/

The problem I seem to have is that I can create the canvas to take up the whole page, but how do I set it up so the canvas is showing a portion of another much larger world? And can dynamically move around like a viewfinder in this larger world.

I have tried google search but when looking for scaling most things are to do with scaling the canvas for other devices and their resolutions.

At the moment I am going to use HTML5 canvas, JS & jQuery to experiment with canvas, are there any other things I should know?

Thanks for your help.

Andrew89898
  • 51
  • 1
  • 6

2 Answers2

2

The 'Camera' for any application is simply the drawing context. Say you have your:

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");

you can move your view by using the translate() method.

Here is a JSFiddle to explain the camera movement: https://jsfiddle.net/0o2nsc18/

To move the camera in the fiddle, click inside the output window and use the arrow keys to move the camera.

user2072826
  • 528
  • 1
  • 5
  • 12
  • Hi, this is great info your JSFiddle shows exactly what I want, Ideally I'd like to have a grid that takes up the fullsize of the page which then is translated. I am trying to do that but I cannot get it to work. I have added the mouse events and tried your setInterval function but nothing seems to work, I already have canvas and context variables. Thanks for your help. – Andrew89898 Jul 23 '15 at 08:33
  • Yes, that is what I want but I would like the grid to be in all directions up to a border, like on agar.io. I can't get my head around how when it is translated it is redrawn because it means you are not really translating. You are moving then redrawing the new view, but how does it know what the new view where you have translated to will look like? – Andrew89898 Jul 26 '15 at 17:00
0

With regards to the scrolling background, have a look at this tutorial, it will give you an idea how the scrolling can be used. You can modify this to whatever way you want, for example when the player pushes up the background will move up whatever the player moves.

For zooming, I believe you're looking for the scaling command.

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 100, 100);
ctx.scale(x,y);

You can scale the image directly rather than the canvas by doing this. The code snippet will scale the width and height of the image by x. Give this post a look.

var w = value;
var h = value;
var x = scale;
ctx.drawImage(img, 0, 0, w/x, h/x);

Have a look here for some stuff on scaling, rotating and other things you might find useful for making a game.

Community
  • 1
  • 1
Grinch91
  • 952
  • 7
  • 15
  • Hi, these resources are great but can you give me another example of using the scale() command? I cannot seem to get it to work, I think it's something to do with re-drawing..? – Andrew89898 Jul 22 '15 at 16:14
  • Have a look at this tutorial [link](http://www.tutorialspoint.com/html5/canvas_scaling.htm) and have a look at this [editor](http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_scale) where you can try it directly yourself – Grinch91 Jul 23 '15 at 10:13