translate() shifting of origin of cooridnates on 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()

Subscribe

* indicates required
Subscribe to plus2net

plus2net.com

Post your comments , suggestion , error , requirements etc here .