Log In  

1) the fullscreen mode is handled in the exported cart minified js (Module.requestFullScreen()). plus it's force-locking the mouse cursor! shouldn't that be in the html file instead ? (so that the js file only handles pico runtime + cardata and just gives out its 128x128 frame buffer?) I'd love to add support for webgl shaders (like crt scanlines). Is that even possible ?

2) I tried resizing the canvas to fit the actual browser window in x128 steps.
(plus F11 would bring the desired pixel perfect fullscreen)

        function resizeCanvas() {
            var size=Math.max(128,Math.min(Math.floor(window.innerWidth/128)*128,Math.floor(window.innerHeight/128)*128))
            canvas.width  = size;
            canvas.height = size;
            var context = canvas.getContext('2d');
            context.strokeStyle = 'white';
            context.lineWidth = '3';
            context.strokeRect(0, 0, canvas.width, canvas.height);
        }

        window.addEventListener('resize', resizeCanvas, false);
        resizeCanvas();

(+ removed the canvas 512px references)

that doesn't work. pico ends up 128x128 in the upper left corner.
is there some kind of Module.resizeCanvas(width,height) I could/should call ?

I'm a total noob at everything html css javascript, so please bear with me ;)

P#35999 2017-01-18 06:16 ( Edited 2018-03-25 13:24)

Sizing stuff on websites is a freakshow. It kind of works like this in that case:

canvas.width and canvas.height (which correspond to what's in <canvas width="?" height="?">) are the actual size of the buffer you are drawing on. They have no bearing on how it'll be displayed - just on how many pixels your canvas will have available to draw on. They will be used as the default display size if there are no other clues.

What you can change is the CSS width and height of the canvas, which will cause whatever is in the buffer to be stretched to those dimensions. For example this will be a 128x128 canvas shown at 4x scale:

<canvas width="128" height="128" style="width: 512px; height:512px;">

As for shaders, etc. - not through WebGL, as far as I can see, since PICO-8 uses a '2d' context for its canvas. You can do a scanlines-like effect through a semi-transparent image on top of the canvas, though.

P#36053 2017-01-18 20:56 ( Edited 2017-01-19 01:56)

thanks a lot krajzeg! that's the heads up I needed!

here's a working version:

function resizeCanvas() {
            var size= Math.max(128,Math.min(Math.floor(window.innerWidth/128)*128,Math.floor(window.innerHeight/128)*128))
            canvas.style.width = size;
            canvas.style.height = size;
        }

        window.addEventListener('load', resizeCanvas, false);
        window.addEventListener('resize', resizeCanvas, false);

still have a few things to iron out, but that's definitely the right track.
plus it also works in fullscreen! (not only f11, the fullscreen button too!)

P#36109 2017-01-19 18:38 ( Edited 2017-01-19 23:38)
P#50794 2018-03-25 09:24 ( Edited 2018-03-25 13:24)

[Please log in to post a comment]

Follow Lexaloffle:        
Generated 2020-04-10 00:17 | 0.012s | 4194k | Q:19