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
Post a Comment