I have an html5 canvas providing a view into a world with a bunch of points. The user can click and drag around to pan the view.
I'd like to know if my method here is horribly inefficient and could possibly be optimized another order of magnitude. It's currently a little laggy for me with a million points.
jsfiddle: https://jsfiddle.net/3oc1mnu6/2/
HTML:
<canvas id="myCanvas" width="960" height="540" style="border:1px solid #000000;"></canvas>
Javascript:
//world dimensions
var worldWidth = 4000;
var worldHeight = 3000;
//mouse down bool
var mouseDown = 0;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//point class
function point(x, y){
this.x = x;
this.y = y;
}
//some key points
var camera = new point(1000, 1000);
var cameraLocationWhenMouseClicked = new point();
var mouseDownLocation = new point();
//the mass of points
var numPoints = 1000000;
var points = [];
for (var i = 0; i < numPoints; i++){
points.push(new point(Math.random() * worldWidth, Math.random() * worldHeight));
}
//mouse event handlers
canvas.addEventListener("mousedown", mouseDownEventHandler);
canvas.addEventListener("mousemove", mouseMoveEventHandler);
canvas.addEventListener("mouseup", mouseUpEventHandler);
//on mouse down
function mouseDownEventHandler(e){
mouseDown = 1;
//update mouseDownLocation
mouseDownLocation.x = e.offsetX;
mouseDownLocation.y = e.offsetY;
//store where the camera was when mouse down occurred
cameraLocationWhenMouseClicked.x = camera.x;
cameraLocationWhenMouseClicked.y = camera.y;
}
//on mouse move
function mouseMoveEventHandler(e){
//if mouse is down
if (mouseDown == 1){
//adjust camera location
camera.x = cameraLocationWhenMouseClicked.x + (mouseDownLocation.x - e.offsetX);
camera.y = cameraLocationWhenMouseClicked.y + (mouseDownLocation.y - e.offsetY);
}
}
//on mouse up
function mouseUpEventHandler(){
mouseDown = 0;
}
function drawScreen(){
//draw canvas
context.fillStyle = "white";
context.fillRect(0, 0, canvas.width, canvas.height);
//draw points
context.fillStyle = "black";
for (var i = 0; i < points.length; i++){
//only draw if in view
if((camera.x < points[i].x)&&(points[i].x < camera.x + canvas.width)&&(camera.y < points[i].y)&&(points[i].y < camera.y + canvas.height)){
context.fillRect(points[i].x - camera.x, points[i].y - camera.y, 1, 1);
}
}
}
window.setInterval(drawScreen);
↧