The FizzBuzz Test
May 22, 2012
Show all

Windowing Transformations

Windowing is the process of transforming co-ordinates from one space to another. It is used when scaling and transforming the view of a program. For example: when you zoom into an image, the original image data is transformed to fill the current screen. This is done through an area referred to as the “window”.

Windowing Calculations in JavaScript

Diagram: showing how a set of co-ordinates can be transformed to the screen through a view window.

In the diagram above you can see windowing in action. The window acts as a go-between, rendering objects from infinite space into a finite area called the “screen”. Moving or scaling the window dimensions keeps the original co-ordinates of the image intact, but affects co-ordinates of the image being rendered.

The following JavaScript code demonstrates a method for transforming co-ordinates to the screen through a window:

(You can click on the example here to see this code running in your web browser now.)


* Windowing Transformations
* – F1LT3R


var object = { x1: 5, x2: 7 } // The Object is a shape in infinite space.
, window = { x1: 2, x2: 12 } // The Window is the current zoom & offset view-port.
, screen = { width: 100 } // The Screen is the finite area into which the view-port is rendered.

object.width = object.x2 – object.x1; // The object’s width
window.width = window.x2 – window.x1; // Calc width of Window
screen.aspect = screen.width / window.width; // Calc render aspect ratio

var context = document.getElementById( ‘canvas’ ).getContext( ‘2d’ );

function calc( x ){
return (x – window.x1) * screen.aspect;

context.fillStyle = “#FFA500”;

console.log( calc(object.x1), calc(object.x2) );

context.fillRect( calc(object.x1), 0, object.width * screen.aspect, 20 );


If you save the previous JavaScript code as “windowing.js”, you can use the following HTML to test the functions:


<canvas id=”canvas” width=”100″ height=”20″ style=”border: 1px solid black;”>

<script type=”text/javascript” src=”windowing-transformations.js”>// <![CDATA[

// ]]></script>


You can click on the example here to see this code running in your web browser now.

Using Windowing to Zoom into Co-ordinates

Above: The JavaScript Windowing functions applied to an HTML5 Canvas

Leave a Reply

Your email address will not be published. Required fields are marked *