[SOLVED] How do I canvas snapshot at a lower resolution

Hey all,

So here's the question: I'm trying to create a "level editor" that exports 256x240 pixel png's, but I don't want to work designing the screens at that size, when I try manually changing the "window size" it messes with the mouse tracking I'm using for placing tiles, so is there a way to switch between fullscreen scaling modes (none, letterbox, etc.) during runtime? or is there a different solution I'm not thinking of?

Thanks

Brent

I doubt that exists based on what I have seen so far.

Have you thought about using an Array of some sort to store tile locations/ids?

The goal of the entire project is to output single screen png's, and aside from my inability to properly change resolution when the snapshot is taken, it works perfectly. Guess I'll just have to 2x or 4x my target resolution for the actual tile placement work, and then downscale the png's manually later to fit the sizes I want... pretty disappointed if I'm being honest

Use this expression to get a smaller screenshot. Change w and h for different sizes.

Browser.ExecJS("
var w = 100;
var h = 100;
var c2canvas=document.getElementById('c2canvas');
var mycanvas = document.createElement('canvas');
mycanvas.width  = w;
mycanvas.height = h;
var ctx = mycanvas.getContext('2d');
ctx.drawImage(c2canvas, 0,0,w,h);
mycanvas.toDataURL();")[/code:6otna5an]

Thanks, R0j0

I'll give this a try, so if I understand, this expression is doing a momentary resize of the canvas for the sake of the snapshot, regardless of how C2 is fullscreen scaling?

It's drawing C2's canvas to a separate, smaller canvas which is used to save from.

Awesome!

Just as an update, R0j0's suggestion completely solved the issue I was having, this thread is definitely solved.

R0J0hound or anyone else. Is is technique cross-platform? I imagine since JavaScript and a canvas are lowest common denominator features I'd think it should supported all platforms.

Also do I need to set the second canvas to null or dispose of it? Or does that not make a performance difference.

Thanks!

—

It should work on any html5 platform I imagine.

The second will be garbage collected after that javascript is run, since nothing is referencing it at that point.

Good deal, makes total sense. Thanks for your help —

I am running into one problem though. I implemented the code into my game take a canvas snapshot upon a button press. Working backwards I could only get it to work on tickcount==1. The same was true in your example

If I changed your example to tickcount==2, it stopped working:

Any guesses? Thanks!

—

It could be webgl related perhaps? Not sure, I don't use webgl currently.

It possibility could be that the timing of when c2's canvas is copied is when the canvas is between redraws when it's cleared? That's my only guess and it could be entirely wrong, also when I've looked into a solution in the past I've not had much success.

A third possibility is no value is ready when invoking a download at that moment. Just a thought and since the built-in snapshot action has a "on canvas snapshot" condition, it may be a possibility. An idea could be to assign the last line of the script to a global var, and in events and then every tick check if the global is set before saving it.

But taking a step back it may help to just use the snapshot action, since that is known to work.

Here's how:

https://dl.dropboxusercontent.com/u/542 ... pshot.capx

use low quality fullscreen scaling

set the canvas size

zoom out the layout so the same stuff is seen.

wait 0 so c2 has a chance to adjust the layout

scroll to the center

take snapshot.

Then after the snapshot set everything back to what it was.