CODEWITHSUNDEEP
htmlmathcanvashtml5-canvas
mowwwalker
mowwwalker

Reputation: 17382

When drawing on a canvas, should calculations be done relative to cartesian plane coordinates?

I've been seeing a lot of canvas-graphics-related javascript projects and libraries lately and was wondering how they handle the coordinate system. When drawing shapes and vectors on the canvas, are the points calculated based on a cartesian plane and converted for the canvas, or is everything calculated directly for the canvas?

I tried playing around with drawing a circle by graphing all its tangent lines until the line intersections start to resemble a curve and found the difference between the cartesian planes I'm familiar with and the coordinate system used by web browsers very confusing. The function for a circle, for example, "y^2 + x^2 = r^2" would need to be translated to "(y-1)^2 + (x-1)^2 = r^2" to be seen on the canvas. And then negative slopes were positive slopes on the canvas and everything would be upside down :/ .

The easiest way for me to think about it was to pretend the origin of a cartesian plane was in the center of the canvas and adjust my coordinates accordingly. On a 500 x 500 canvas, the center would be 250,250, so if I ended up with a point at 50,50, it would be drawn at (250 + 50, 250 - 50) = (300, 200).

I get the feeling I'm over-complicating this, but I can't wrap my mind around the clean way to work with a canvas.

Upvotes: 0

Views: 1739

Answers (2)

lmsteffan
lmsteffan

Reputation: 870

Current practice can perhaps be exemplified by a quote from David Flanagan's book "JavaScript : The Definitive Guide", which says that

Certain canvas operations and attributes (such as extracting raw pixel values and setting shadow offsets) always use this default coordinate system

(the default coordinate system is that of the canvas). And it continues with

In most canvas operations, when you specify the coordinates of a point, it is taken to be a point in the current coordinate system [that's for example the cartesian plane you mentioned, @Walkerneo], not in the default coordinate system.

Why is using a "current coordinate system" more useful than using directly the canvas c.s. ?

First and foremost, I believe, because it is independent of the canvas itself, which is tied to the screen (more specifically, the default coordinate system dimensions are expressed in pixels). Using for instance a Cartesian (orthogonal) coordinate system makes it easy for you (well, for me too, obviously :-D ) to specify your drawing in terms of what you want to draw, leaving the task of how to draw it to the transformations offered by the Canvas API. In particular, you can express dimensions in the natural units of your drawing, and perform a scale and a translation to fit (or not, as the case may be...) your drawing to the canvas.

Furthermore, using transformations is often a clearer way to build your drawing since it allows you to get "farther" from the underlying coord system and specify your drawing in terms of higher level operations ('scale', 'rotate', 'translate' and the more general 'transform'). The abovementioned book gives a very nice exemple of the power of this approach, drawing a Koch (fractal) snowflake in many fewer lines that would be possible (if at all) using canvas coordinates.

Upvotes: 2

Joni
Joni

Reputation: 111329

The HTML5 canvas, like most graphics systems, uses a coordinate system where (0,0) is in the top left and the x-axis and y-axis go from left to right and top down respectively. This makes sense if you think about how you would create a graphics system with nothing but a block of memory: the simplest way to map coordinates (x,y) to a memory slot is to take x+w*y, where w is the width of a line.

This means that the canvas coordinate system differs from what you use in mathematics in two ways: (0,0) is not the center like it usually is, and y grows down rather than up. The last part is what makes your figures upside down.

You can set transformations on the canvas that make the coordinate system more like what you are used to:

var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(250,250);   // Move (0,0) to (250, 250)
ctx.scale(1,-1);          // Make y grow up rather than down

Upvotes: 0

Related Questions