diff --git a/docs/frontend.js b/docs/frontend.js
index 56f66a3d..95b35564 100644
--- a/docs/frontend.js
+++ b/docs/frontend.js
@@ -111,38 +111,59 @@ function paint_gui(canvas, input) {
var g_mouse_pos = { x: -1000.0, y: -1000.0 };
var g_mouse_down = false;
function get_input(canvas) {
+ var pixels_per_point = window.devicePixelRatio || 1;
+ var ctx = canvas.getContext("2d");
+ ctx.scale(pixels_per_point, pixels_per_point);
+ // Resize based on screen size:
+ canvas.setAttribute("width", window.innerWidth * pixels_per_point);
+ canvas.setAttribute("height", window.innerHeight * pixels_per_point);
return {
mouse_down: g_mouse_down,
mouse_pos: g_mouse_pos,
screen_size: { x: canvas.width, y: canvas.height }
};
}
-function mouse_pos_from_event(canvas, evt) {
+function mouse_pos_from_event(canvas, event) {
var rect = canvas.getBoundingClientRect();
return {
- x: evt.clientX - rect.left,
- y: evt.clientY - rect.top
+ x: event.clientX - rect.left,
+ y: event.clientY - rect.top
};
}
function initialize() {
+ console.log("window.devicePixelRatio: " + window.devicePixelRatio);
var canvas = document.getElementById("canvas");
- canvas.addEventListener("mousemove", function (evt) {
- g_mouse_pos = mouse_pos_from_event(canvas, evt);
- paint_gui(canvas, get_input(canvas));
- }, false);
- canvas.addEventListener("mouseleave", function (evt) {
+ var repaint = function () { return paint_gui(canvas, get_input(canvas)); };
+ canvas.addEventListener("mousemove", function (event) {
+ g_mouse_pos = mouse_pos_from_event(canvas, event);
+ repaint();
+ event.stopPropagation();
+ event.preventDefault();
+ });
+ canvas.addEventListener("mouseleave", function (event) {
g_mouse_pos = { x: -1000.0, y: -1000.0 };
- paint_gui(canvas, get_input(canvas));
- }, false);
- canvas.addEventListener("mousedown", function (evt) {
- g_mouse_pos = mouse_pos_from_event(canvas, evt);
+ repaint();
+ event.stopPropagation();
+ event.preventDefault();
+ });
+ canvas.addEventListener("mousedown", function (event) {
+ g_mouse_pos = mouse_pos_from_event(canvas, event);
g_mouse_down = true;
- paint_gui(canvas, get_input(canvas));
- }, false);
- canvas.addEventListener("mouseup", function (evt) {
- g_mouse_pos = mouse_pos_from_event(canvas, evt);
+ repaint();
+ event.stopPropagation();
+ event.preventDefault();
+ });
+ canvas.addEventListener("mouseup", function (event) {
+ g_mouse_pos = mouse_pos_from_event(canvas, event);
g_mouse_down = false;
- paint_gui(canvas, get_input(canvas));
- }, false);
- paint_gui(canvas, get_input(canvas));
+ repaint();
+ event.stopPropagation();
+ event.preventDefault();
+ });
+ window.addEventListener("load", repaint);
+ window.addEventListener("pagehide", repaint);
+ window.addEventListener("pageshow", repaint);
+ window.addEventListener("resize", repaint);
+ // setInterval(repaint, 16);
+ repaint();
}
diff --git a/docs/frontend.ts b/docs/frontend.ts
index 86169fa0..75f3e268 100644
--- a/docs/frontend.ts
+++ b/docs/frontend.ts
@@ -52,7 +52,7 @@ interface Text {
kind: "text";
fill_color: Color | null;
font_name: string; // e.g. "Palatino"
- font_size: number, // Height in pixels, e.g. 12
+ font_size: number; // Height in pixels, e.g. 12
pos: Vec2;
stroke_color: Color | null;
text: string;
@@ -211,6 +211,15 @@ let g_mouse_pos = { x: -1000.0, y: -1000.0 };
let g_mouse_down = false;
function get_input(canvas): RawInput {
+ const pixels_per_point = window.devicePixelRatio || 1;
+
+ const ctx = canvas.getContext("2d");
+ ctx.scale(pixels_per_point, pixels_per_point);
+
+ // Resize based on screen size:
+ canvas.setAttribute("width", window.innerWidth * pixels_per_point);
+ canvas.setAttribute("height", window.innerHeight * pixels_per_point);
+
return {
mouse_down: g_mouse_down,
mouse_pos: g_mouse_pos,
@@ -218,54 +227,68 @@ function get_input(canvas): RawInput {
};
}
-function mouse_pos_from_event(canvas, evt): Vec2 {
+function mouse_pos_from_event(canvas, event): Vec2 {
const rect = canvas.getBoundingClientRect();
return {
- x: evt.clientX - rect.left,
- y: evt.clientY - rect.top,
+ x: event.clientX - rect.left,
+ y: event.clientY - rect.top,
};
}
function initialize() {
+ console.log(`window.devicePixelRatio: ${window.devicePixelRatio}`);
+
const canvas = document.getElementById("canvas");
+ const repaint = () => paint_gui(canvas, get_input(canvas));
canvas.addEventListener(
"mousemove",
- (evt) => {
- g_mouse_pos = mouse_pos_from_event(canvas, evt);
- paint_gui(canvas, get_input(canvas));
+ (event) => {
+ g_mouse_pos = mouse_pos_from_event(canvas, event);
+ repaint();
+ event.stopPropagation();
+ event.preventDefault();
},
- false,
);
canvas.addEventListener(
"mouseleave",
- (evt) => {
+ (event) => {
g_mouse_pos = { x: -1000.0, y: -1000.0 };
- paint_gui(canvas, get_input(canvas));
+ repaint();
+ event.stopPropagation();
+ event.preventDefault();
},
- false,
);
canvas.addEventListener(
"mousedown",
- (evt) => {
- g_mouse_pos = mouse_pos_from_event(canvas, evt);
+ (event) => {
+ g_mouse_pos = mouse_pos_from_event(canvas, event);
g_mouse_down = true;
- paint_gui(canvas, get_input(canvas));
+ repaint();
+ event.stopPropagation();
+ event.preventDefault();
},
- false,
);
canvas.addEventListener(
"mouseup",
- (evt) => {
- g_mouse_pos = mouse_pos_from_event(canvas, evt);
+ (event) => {
+ g_mouse_pos = mouse_pos_from_event(canvas, event);
g_mouse_down = false;
- paint_gui(canvas, get_input(canvas));
+ repaint();
+ event.stopPropagation();
+ event.preventDefault();
},
- false,
);
- paint_gui(canvas, get_input(canvas));
+ window.addEventListener("load", repaint);
+ window.addEventListener("pagehide", repaint);
+ window.addEventListener("pageshow", repaint);
+ window.addEventListener("resize", repaint);
+
+ // setInterval(repaint, 16);
+
+ repaint();
}
diff --git a/docs/index.html b/docs/index.html
index 2308071f..31720ec9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -9,12 +9,11 @@
/* Remove touch delay: */
touch-action: manipulation;
}
-
body {
background: #000000;
- color: #bbbbbb;
- max-width: 1024px;
- margin: auto;
+ }
+ html, body {
+ overflow: hidden;
}
@@ -38,6 +37,6 @@
-
+