aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorYingtong Li <runassudo@yingtongli.me>2017-03-28 22:15:04 +1100
committerYingtong Li <runassudo@yingtongli.me>2017-03-28 22:15:04 +1100
commit8d4a226fe3919ea6b2505b57eb2c4e9be45625a3 (patch)
tree0f23518a82d0428bfcf10f47899e64e0c71b9726
parentc14ec43fbf3b6e7edcd3fe8bac8edb71be2f1cc5 (diff)
Reduce size of canvas where unnecessarily large
-rw-r--r--pblive/templates/question_draw.html15
-rw-r--r--pblive/templates/question_draw_admin.html12
2 files changed, 17 insertions, 10 deletions
diff --git a/pblive/templates/question_draw.html b/pblive/templates/question_draw.html
index 9202e1a..d49d771 100644
--- a/pblive/templates/question_draw.html
+++ b/pblive/templates/question_draw.html
@@ -46,7 +46,6 @@
// phew!
var imageAR = image.width / image.height;
- var canvasAR;
var scale;
function down(e) {
@@ -147,12 +146,16 @@
window.redraw = redraw;
function resize_canvas() {
- document.getElementById('draw_canvas').width = document.getElementById('session_main').clientWidth;
- document.getElementById('draw_canvas').height = 0.8 * window.innerHeight;
+ var maxWidth = document.getElementById('session_main').clientWidth;
+ var maxHeight = 0.8 * window.innerHeight
// Recalculate scale
- canvasAR = context.canvas.width / context.canvas.height;
- scale = (canvasAR > imageAR) ? (context.canvas.height / image.height) : (context.canvas.width / image.width); // image dim * scale = canvas dim
+ var maxAR = maxWidth / maxHeight;
+ scale = (maxAR > imageAR) ? (maxHeight / image.height) : (maxWidth / image.width); // image dim * scale = canvas dim
+
+ // Minimise size of canvas
+ document.getElementById('draw_canvas').width = image.width * scale;
+ document.getElementById('draw_canvas').height = image.height * scale;
redraw(true);
}
@@ -161,7 +164,7 @@
document.getElementById('draw_canvas').height = image.height;
// Recalculate scale
- canvasAR = context.canvas.width / context.canvas.height;
+ var canvasAR = context.canvas.width / context.canvas.height;
scale = (canvasAR > imageAR) ? (context.canvas.height / image.height) : (context.canvas.width / image.width); // image dim * scale = canvas dim
}
window.onresize = resize_canvas;
diff --git a/pblive/templates/question_draw_admin.html b/pblive/templates/question_draw_admin.html
index c0a35b0..a4cba2d 100644
--- a/pblive/templates/question_draw_admin.html
+++ b/pblive/templates/question_draw_admin.html
@@ -80,12 +80,16 @@
window.redraw = redraw;
function resize_canvas() {
- document.getElementById('draw_canvas').width = document.getElementById('session_main').clientWidth;
- document.getElementById('draw_canvas').height = 0.8 * window.innerHeight;
+ var maxWidth = document.getElementById('session_main').clientWidth;
+ var maxHeight = 0.8 * window.innerHeight
// Recalculate scale
- canvasAR = context.canvas.width / context.canvas.height;
- scale = (canvasAR > imageAR) ? (context.canvas.height / image.height) : (context.canvas.width / image.width); // image dim * scale = canvas dim
+ var maxAR = maxWidth / maxHeight;
+ scale = (maxAR > imageAR) ? (maxHeight / image.height) : (maxWidth / image.width); // image dim * scale = canvas dim
+
+ // Minimise size of canvas
+ document.getElementById('draw_canvas').width = image.width * scale;
+ document.getElementById('draw_canvas').height = image.height * scale;
redraw();
}
Contact (issues, pull requests, etc.) at git@yingtongli.me. Generated by cgit.