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

fix: hydra canvas adjust to screen size

Browse source 
+ simplify hydra init (use getDrawContext)
+ make getDrawContext more versatile
This commit is contained in:
Felix Roos 2024-03-03 22:50:51 +01:00
parent 62d8955da9
commit d5ed065011
2 changed files with 17 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

15
packages/canvas/draw.mjs
View file

@ -6,26 +6,27 @@ This program is free software: you can redistribute it and/or modify it under th
import { Pattern, getTime, State, TimeSpan } from '@strudel/core';
export const getDrawContext = (id = 'test-canvas') => {
export const getDrawContext = (id = 'test-canvas', options) => {
let { contextType = '2d', pixelated = false, pixelRatio = window.devicePixelRatio } = options || {};
let canvas = document.querySelector('#' + id);
if (!canvas) {
const scale = window.devicePixelRatio || 1;
canvas = document.createElement('canvas');
canvas.id = id;
canvas.width = window.innerWidth * scale;
canvas.height = window.innerHeight * scale;
canvas.width = window.innerWidth * pixelRatio;
canvas.height = window.innerHeight * pixelRatio;
canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0';
pixelated && (canvas.style.imageRendering = 'pixelated');
document.body.prepend(canvas);
let timeout;
window.addEventListener('resize', () => {
timeout && clearTimeout(timeout);
timeout = setTimeout(() => {
canvas.width = window.innerWidth * scale;
canvas.height = window.innerHeight * scale;
canvas.width = window.innerWidth * pixelRatio;
canvas.height = window.innerHeight * pixelRatio;
}, 200);
});
}
return canvas.getContext('2d');
return canvas.getContext(contextType);
};
Pattern.prototype.draw = function (callback, { from, to, onQuery } = {}) {