Pixel count on canvas not correct #1764
-
|
Hello all, In my experiment i display canvases that need to be as big as my screen, 1080x1920 pixels. However, when i use Can anyone explain/suggest how to fix this? For my experiment, the size of objects is rather important, so i need to know for sure that 66 pixels equal 1 cm, for instance. Is there maybe a way to do this?: I'm open to any suggestion, thanks in advance! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
Hi @DanielBruijn, if you open the browser's developer tools and find the Elements tab, you'll see that the canvas element is actually nested under a few different things: body -> jspsych-content-wrapper-div -> jspsych-content div -> jspsych-canvas-keyboard-response-stimulus div -> canvas element. Most of these things have a height and width of 100%, except for the jspsych-content div, which has a max-width of 95%. This means that, by default, all of the jsPsych content will be slightly more narrow than the page width. You can change that like this: <style>#jspsych-content {max-width:100%;}</style>Then, to get the size of the browser page to use for the canvas height and width, you can use the var canvas_h = document.getElementsByTagName('body')[0].clientHeight;
var canvas_w = document.getElementsByTagName('body')[0].clientWidth;I hope this helps. Let us know if it works, and if you have any other questions. |
Beta Was this translation helpful? Give feedback.
-
I already used the combination of CSS and [canvas_h,canvas_w], if that is what you meant.
I see, that is indeed what happens when i input [1080,1920] as the size. The link to my experiment is 33rnlr23rk.cognition.run. Feel free to nose around! It's not very urgent though, my experiment is already live with the slightly smaller canvas. I also use the |
Beta Was this translation helpful? Give feedback.
-
And you're still getting scroll bars? I tried checking myself but I wasn't seeing the canvas on the page, and when I looked at the Elements tab, I saw that the canvas was on the page but had a height of 0. I think the reason might be because the body element isn't ready yet when you get its var canvas_h;
var canvas_w;
practice_instructions = {
type: "html-keyboard-response",
stimulus: [
"<p style='font-size: 25px'> First we'll do a practice round, with easier trials (the first screen will appear for a longer time).</p>" +
"<p style='font-size: 25px'> Remember, press 'C' if the indicated circle has Changed colour, and press 'N' if it has Not changed colour. </p>" +
"<p style='color:#D3D3D3'>This text is just to create space.</p>" +
"<p style='font-size: 25px'> Press 'P' to proceed and have fun!</p>"
],
choices: "p",
on_finish: function() {
canvas_h = document.getElementsByTagName('body')[0].clientHeight;
canvas_w = document.getElementsByTagName('body')[0].clientWidth;
}
};
var practice_trials = {
timeline: [
{
type: 'canvas-keyboard-response',
stimulus: drawBlank,
choices: jsPsych.NO_KEYS,
trial_duration: 100-8, //the -8 represents the mean few milliseconds of lag that the browser can introduce. Rather a shorter presentation then a longer one, especially for the delays/SOAs
canvas_size: function() { return [canvas_h,canvas_w]; }
},
// ...Also, you could try hiding the scroll bars like this: document.body.style.overflow = "hidden"; |
Beta Was this translation helpful? Give feedback.
-
No, because [1073,1872] is the size at which the scrollbars disappear, and apparently canvas_h/w take on the same values.
Right, i will try that.
Indeed, i was using that already ;) |
Beta Was this translation helpful? Give feedback.
-
|
Oh okay, that actually worked! First it didn't, but after a reload it did, hence my surprise. So now i have defined the So, problem solved, thanks! Odd though, that it takes this much effort to get a few pixels right. |
Beta Was this translation helpful? Give feedback.
-
|
Great!
I agree, sorry... Maybe there's an easier way to do this that I'm not aware of. |
Beta Was this translation helpful? Give feedback.
Hi @DanielBruijn, if you open the browser's developer tools and find the Elements tab, you'll see that the canvas element is actually nested under a few different things: body -> jspsych-content-wrapper-div -> jspsych-content div -> jspsych-canvas-keyboard-response-stimulus div -> canvas element. Most of these things have a height and width of 100%, except for the jspsych-content div, which has a max-width of 95%. This means that, by default, all of the jsPsych content will be slightly more narrow than the page width. You can change that like this:
Then, to get the size of the browser page to use for the canvas height and width, you can us…