Drawing Mouse Select Range on HTML5 Canvas Doesn't Clear


Drawing Mouse Select Range on HTML5 Canvas Doesn't Clear



On mouse down I am storing the mouse starting x,y and then calculating the mouse selection range to draw a rectangle displaying the selection box. This works great, however until I release the mouse button I see every rectangle drawn for the mouse selection. Where am I going wrong?


this.drawRange = function() {
var c = engine.game_screen;
var top_left = [mouse.start_x, mouse.start_y];
var top_right = [mouse.start_x + mouse.range_width, mouse.start_y];
var bottom_left = [mouse.start_x, mouse.start_y + mouse.range_height];
var bottom_right = [mouse.start_x + mouse.range_width, mouse.start_y + mouse.range_height];
c.beginPath;
c.moveTo(top_left[0], top_left[1]);
c.lineTo(top_right[0], top_right[1]);
c.lineTo(bottom_right[0], bottom_right[1]);
c.lineTo(bottom_left[0], bottom_left[1]);
c.lineTo(top_left[0], top_left[1]);
c.stroke();
}

engine.draw = function() {
engine.game_screen.clearRect(0, 0, engine.settings.screen_width, engine.settings.screen_height);
engine.game_states[engine.game_states.length - 1].draw();
if(engine.mouse.left_click_down) {
engine.mouse.drawRange();
}
}



Thank you for reading









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

Opening a url is failing in Swift

Export result set on Dbeaver to CSV