How to Add Custom Coordinate For HTML5 Canvas

Question

Can you please take a look at This Demo and let me know how I can set the beginning of the canvas from 0,0 to 500,1200? For example if I have a Point with coordinates of 583 , 1642 then be able to add the point as:

ctx.arc(583, 1642, 5, 0, Math.PI * 2, true);

$("#draw").on("click", function () {
    var ctx = $('#canvas')[0].getContext("2d");
    ctx.fillStyle = "#00A308";
    ctx.beginPath();
    ctx.arc(0, 0, 5, 0, Math.PI * 2, true);
    ctx.arc(75, 75, 5, 0, Math.PI * 2, true);
    ctx.arc(300, 300, 5, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
});

Thanks,

Answer 1

You can use translate to shift the coordinate system. Just shift it the opposite direction, for example:

ctx.translate(-500, -1200);

Now when you draw something at 583, 1642 it will show up at 83, 442 relative to the view-port.

To reset just transform back or initialize with an identity matrix:

ctx.setTransform(1, 0, 0, 1, 0, 0);

Modified fiddle