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,
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.