translate() to shift origin of the canvas to new coordinates showing horizontal and vertical move of canvas

Drag the sliders to change the X, Y position.

x: Shifting horizontal Position (Origin ) from left edge of the canvas,
y: Shifting vertical Position ( Origin ) from Top edge of the canvas,

Translate () changes the top left or origin (0,0) of the canvas.
If a rectangle is drawn at x=50, y=50 coordinates, once we shift the origin by using translate() then the position of rectangle will shift by equal distance.
For your understanding the new origin or x=0,y=0 is marked with small red square after each translate.

var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
var x=10;
var y=10;

my_function=function my_function(){	
gctx.translate(x,y)
gctx.fillStyle = 'red';
gctx.fillRect(0,0,5,5);

gctx.rect(50,20,100,20);
gctx.stroke();

$( "#textx" ).html("X Postion = " +  x );
$( "#texty" ).html("Y Postion = " +  y );
$( "#t1" ).html("translate("+x+","+y+")" );

}
/////////////
$('#b1').click(function(){
gctx.setTransform(1, 0, 0, 1, 0, 0);
gctx.clearRect(0, 0, my_canvas.width,my_canvas.height);
gctx.beginPath()
x=10;
y=10;

my_function();
})
///////////
///////////////////////////
$( "#sliderx" ).slider({
orientation:'horizontal',
min:0,
max:400,
step:10,
animate:'slow',
value:x,
disabled:false,
slide: function(event, ui) { 
x=ui.value;
my_function()
} 
});
///////////////////////////////
///////////////////////////
$( "#slidery" ).slider({
orientation:'horizontal',
min:0,
max:200,
step:10,
animate:'slow',
value:y,
disabled:false,
slide: function(event, ui) { 
y=ui.value;
my_function()
} 
});
///////////////////////////////
my_function()

translate() shifting of origin of cooridnates on Canvas

Subscribe