Wednesday, September 4, 2013

Viewport Vs Canvas

If you are a web developer, you have probably wondered what is the viewport or what is the canvas. Maybe you have asked yourself whether there is any relationship between viewport and canvas.

A common definition of canvas is: "the canvas is the space where the formatting structure of a document is rendered ".
A common definitions of viewport is: "the browser viewport is the visible portion of the canvas".
Actually, the viewport definition is a little complicated because it refers to the canvas.

So, let's try to find some better ways to define canvas and viewport.

The Canvas or Document's Canvas

The browser renders HTML documents on a canvas. You can think of canvas as infinite in the two dimension of the space, but the rendering takes place in a finite region of the canvas.

The Viewport or Browser's Viewport

For viewport or browser viewport it is meant a rectangular window through which you can see an HTML document.
The viewport has a size: the width and height properties of the rectangle. Viewport's size does not correspond to display's size, for example common size on laptop display is 1280x800 pixels, on mobile display is 480x800 pixels.

In the above picture you can see the Firefox browser window and the window of the viewport. The viewport is emphasized by the yellow rectangle with grey borders.

No comments :

Post a Comment