hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve canvas quality on retina

Browse source
This commit is contained in:
Felix Roos 2023-08-25 12:39:38 +02:00
parent 7370f41fa0
commit 68ea086e2a
1 changed files with 6 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

11
packages/core/draw.mjs
View file

@ -9,18 +9,19 @@ import { Pattern, getTime, State, TimeSpan } from './index.mjs';
export const getDrawContext = (id = 'test-canvas') => { export const getDrawContext = (id = 'test-canvas') => {
let canvas = document.querySelector('#' + id); let canvas = document.querySelector('#' + id);
if (!canvas) { if (!canvas) {
const scale = 2; // 2 = crisp on retina screens
canvas = document.createElement('canvas'); canvas = document.createElement('canvas');
canvas.id = id; canvas.id = id;
canvas.width = window.innerWidth; canvas.width = window.innerWidth * scale;
canvas.height = window.innerHeight; canvas.height = window.innerHeight * scale;
canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0'; canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0';
document.body.prepend(canvas); document.body.prepend(canvas);
let timeout; let timeout;
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
timeout && clearTimeout(timeout); timeout && clearTimeout(timeout);
timeout = setTimeout(() => { timeout = setTimeout(() => {
canvas.width = window.innerWidth; canvas.width = window.innerWidth * scale;
canvas.height = window.innerHeight; canvas.height = window.innerHeight * scale;
}, 200); }, 200);
}); });
} }
@ -59,7 +60,7 @@ Pattern.prototype.draw = function (callback, { from, to, onQuery } = {}) {
export const cleanupDraw = (clearScreen = true) => { export const cleanupDraw = (clearScreen = true) => {
const ctx = getDrawContext(); const ctx = getDrawContext();
clearScreen && ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); clearScreen && ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.width);
if (window.strudelAnimation) { if (window.strudelAnimation) {
cancelAnimationFrame(window.strudelAnimation); cancelAnimationFrame(window.strudelAnimation);
} }