CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
MichaelvdNet
MichaelvdNet

Reputation: 1074

Convert position coordinates to canvas coordinates

I have to convert ingame position coordinates to HTML5 Canvas coordinates.

The given coordinates look like 

-2159.968750,-926.968750
-2159.968750,-704.031250
-2026.847167,-926.993835

The given coordinates do not represent pixels like Canvas coordinates.

Is there any method to convert any given coordinate to the corresponding canvas coordinate with only a few calibration coordinates?

For example i know that coordinate #1 is (66, 980) on the canvas and coordinate #2 is (66, 933) on the canvas.

Thanks in advance

Upvotes: 1

Views: 3106

Answers (2)

GameAlchemist
GameAlchemist

Reputation: 19294

What you most probably want is to show a part of the virtual world of your game on the canvas.

• First thing is you have to decide of this view rect and store it in some way.
Most simple : 

var viewRect = { x : -3000, y:-3000, width: 6000, height:6000 } ;

• Then, when you want to draw, i suggest you let the canvas do the math for you and use a transform.

So with ‘canvasWidth‘ and ‘canvasHeight‘ initialized as you guess, the drawing code looks like : 

context.clearRect(0,0,canvasWidth, canvasHeight);
context.save();
var ratio = canvasWidth / viewRect.width;
context.scale(ratio, ratio);
context.translate(-viewRect.x, -viewRect.y);
//
// do your drawings here in world coordinates.
context.fillStyle='black';
context.fillRect(-2000, -800, 300, 300);
//
context.restore();

Notice that you have to save() and restore() the context to keep it correct on each render.

(You might also not use save/restore and use ‘setTransform(1, 0, 0, 1, 0, 0);‘ to reset the transform.)

most simple jsbin is here : http://jsbin.com/hudaqoqavu/1/

Upvotes: 1

markE
markE

Reputation: 105015

You can map your game values into canvas coordinates like this:

// fit map game values into canvas coordinates
// value is a game coordinate to be translated into a canvas coordinate
// gameLow & gameHigh are the min & max out of all the game values
// canvasLow & canvasHigh are the available canvas coordinates
// to use the entire canvas canvasLow==0 & canvasHigh==the canvas width in pixels
function mapRange(value, gameLow, gameHigh, canvasLow, canvasHigh) {
    return ( canvasLow + 
        (canvasHigh - canvasLow) * (value - gameLow) / (gameHigh - gameLow) );
}

Example Usage:

Given an array of game X values find the minimum and maximum values of X.

// Given an array of X values
var gameValuesX=[-2159.968750, -2159.968750, -2026.847167];

// Find the min & max X
var rangeX=calcgameMinMax(gameValues);

function calcgameMinMax(a){
    var min=100000000;
    var max=-100000000;
    for(var i=0;i<a.length;i++){
        var value=a[i];
        if(value<min){min=value;}
        if(value>max){max=value;}
    }
    return({min:min,max:max});
}

For each game X, call mapRange() supplying the game's max-X & min-X game coordinate values and the canvas min-X & max-X coordinate values.

for(var i=0;i<gameValuesX.length;i++){

    // where canvas.width is the width of the canvas in pixels
    console.log( mapRange( gameValuesX[i], rangeX.min, rangeX.max, 0, canvas.width ) );

}

And do the same for the game Y values...

Good luck with your project!

Upvotes: 2

Related Questions